Skip to content

Commit 4df795e

Browse files
ranst91ranst91
authored
Merge pull request #332 from ag-ui-protocol/feat/support-subgraph-streaming
feat: support subgraph streaming
2 parents 280c232 + 7c336c3 commit 4df795e

File tree

25 files changed

+2301
-25
lines changed

25 files changed

+2301
-25
lines changed

‎typescript-sdk/apps/dojo/e2e/pages/langGraphFastAPIPages/SubgraphsPage.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { SubgraphsPage } from '../langGraphPages/SubgraphsPage'

‎typescript-sdk/apps/dojo/e2e/pages/langGraphPages/SubgraphsPage.ts‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
import { Page, Locator, expect } from '@playwright/test';
2+
3+
export class SubgraphsPage {
4+
readonly page: Page;
5+
readonly travelPlannerButton: Locator;
6+
readonly chatInput: Locator;
7+
readonly sendButton: Locator;
8+
readonly agentGreeting: Locator;
9+
readonly agentMessage: Locator;
10+
readonly userMessage: Locator;
11+
12+
// Flight-related elements
13+
readonly flightOptions: Locator;
14+
readonly klmFlightOption: Locator;
15+
readonly unitedFlightOption: Locator;
16+
readonly flightSelectionInterface: Locator;
17+
18+
// Hotel-related elements
19+
readonly hotelOptions: Locator;
20+
readonly hotelZephyrOption: Locator;
21+
readonly ritzCarltonOption: Locator;
22+
readonly hotelZoeOption: Locator;
23+
readonly hotelSelectionInterface: Locator;
24+
25+
// Itinerary and state elements
26+
readonly itineraryDisplay: Locator;
27+
readonly selectedFlight: Locator;
28+
readonly selectedHotel: Locator;
29+
readonly experienceRecommendations: Locator;
30+
31+
// Subgraph activity indicators
32+
readonly activeAgent: Locator;
33+
readonly supervisorIndicator: Locator;
34+
readonly flightsAgentIndicator: Locator;
35+
readonly hotelsAgentIndicator: Locator;
36+
readonly experiencesAgentIndicator: Locator;
37+
38+
constructor(page: Page) {
39+
this.page = page;
40+
this.travelPlannerButton = page.getByRole('button', { name: /travel.*planner|subgraphs/i });
41+
this.agentGreeting = page.getByText(/travel.*planning|supervisor.*coordinate/i);
42+
this.chatInput = page.getByRole('textbox', { name: 'Type a message...' });
43+
this.sendButton = page.locator('[data-test-id="copilot-chat-ready"]');
44+
this.agentMessage = page.locator('.copilotKitAssistantMessage');
45+
this.userMessage = page.locator('.copilotKitUserMessage');
46+
47+
// Flight selection elements
48+
this.flightOptions = page.locator('[data-testid*="flight"], .flight-option');
49+
this.klmFlightOption = page.getByText(/KLM.*\$650.*11h 30m/);
50+
this.unitedFlightOption = page.getByText(/United.*\$720.*12h 15m/);
51+
this.flightSelectionInterface = page.locator('[data-testid*="flight-select"], .flight-selection');
52+
53+
// Hotel selection elements
54+
this.hotelOptions = page.locator('[data-testid*="hotel"], .hotel-option');
55+
this.hotelZephyrOption = page.getByText(/Hotel Zephyr.*Fisherman\'s Wharf.*\$280/);
56+
this.ritzCarltonOption = page.getByText(/Ritz-Carlton.*Nob Hill.*\$550/);
57+
this.hotelZoeOption = page.getByText(/Hotel Zoe.*Union Square.*\$320/);
58+
this.hotelSelectionInterface = page.locator('[data-testid*="hotel-select"], .hotel-selection');
59+
60+
// Itinerary elements
61+
this.itineraryDisplay = page.locator('[data-testid*="itinerary"], .itinerary');
62+
this.selectedFlight = page.locator('[data-testid*="selected-flight"], .selected-flight');
63+
this.selectedHotel = page.locator('[data-testid*="selected-hotel"], .selected-hotel');
64+
this.experienceRecommendations = page.locator('[data-testid*="experience"], .experience');
65+
66+
// Agent activity indicators
67+
this.activeAgent = page.locator('[data-testid*="active-agent"], .active-agent');
68+
this.supervisorIndicator = page.locator('[data-testid*="supervisor"], .supervisor-active');
69+
this.flightsAgentIndicator = page.locator('[data-testid*="flights-agent"], .flights-agent-active');
70+
this.hotelsAgentIndicator = page.locator('[data-testid*="hotels-agent"], .hotels-agent-active');
71+
this.experiencesAgentIndicator = page.locator('[data-testid*="experiences-agent"], .experiences-agent-active');
72+
}
73+
74+
async openChat() {
75+
await this.travelPlannerButton.click();
76+
}
77+
78+
async sendMessage(message: string) {
79+
await this.chatInput.click();
80+
await this.chatInput.fill(message);
81+
await this.sendButton.click();
82+
}
83+
84+
async selectFlight(airline: 'KLM' | 'United') {
85+
const flightOption = airline === 'KLM' ? this.klmFlightOption : this.unitedFlightOption;
86+
87+
// Wait for flight options to be presented
88+
await expect(this.flightOptions.first()).toBeVisible({ timeout: 15000 });
89+
90+
// Click on the desired flight option
91+
await flightOption.click();
92+
}
93+
94+
async selectHotel(hotel: 'Zephyr' | 'Ritz-Carlton' | 'Zoe') {
95+
let hotelOption: Locator;
96+
97+
switch (hotel) {
98+
case 'Zephyr':
99+
hotelOption = this.hotelZephyrOption;
100+
break;
101+
case 'Ritz-Carlton':
102+
hotelOption = this.ritzCarltonOption;
103+
break;
104+
case 'Zoe':
105+
hotelOption = this.hotelZoeOption;
106+
break;
107+
}
108+
109+
// Wait for hotel options to be presented
110+
await expect(this.hotelOptions.first()).toBeVisible({ timeout: 15000 });
111+
112+
// Click on the desired hotel option
113+
await hotelOption.click();
114+
}
115+
116+
async waitForFlightsAgent() {
117+
// Wait for flights agent to become active (or look for flight-related content)
118+
// Use .first() to handle multiple matches in strict mode
119+
await expect(
120+
this.page.getByText(/flight.*options|Amsterdam.*San Francisco|KLM|United/i).first()
121+
).toBeVisible({ timeout: 20000 });
122+
}
123+
124+
async waitForHotelsAgent() {
125+
// Wait for hotels agent to become active (or look for hotel-related content)
126+
// Use .first() to handle multiple matches in strict mode
127+
await expect(
128+
this.page.getByText(/hotel.*options|accommodation|Zephyr|Ritz-Carlton|Hotel Zoe/i).first()
129+
).toBeVisible({ timeout: 20000 });
130+
}
131+
132+
async waitForExperiencesAgent() {
133+
// Wait for experiences agent to become active (or look for experience-related content)
134+
// Use .first() to handle multiple matches in strict mode
135+
await expect(
136+
this.page.getByText(/experience|activities|restaurant|Pier 39|Golden Gate|Swan Oyster|Tartine/i).first()
137+
).toBeVisible({ timeout: 20000 });
138+
}
139+
140+
async verifyStaticFlightData() {
141+
// Verify the hardcoded flight options are present
142+
await expect(this.page.getByText(/KLM.*\$650.*11h 30m/).first()).toBeVisible();
143+
await expect(this.page.getByText(/United.*\$720.*12h 15m/).first()).toBeVisible();
144+
}
145+
146+
async verifyStaticHotelData() {
147+
// Verify the hardcoded hotel options are present
148+
await expect(this.page.getByText(/Hotel Zephyr.*\$280/).first()).toBeVisible();
149+
await expect(this.page.getByText(/Ritz-Carlton.*\$550/).first()).toBeVisible();
150+
await expect(this.page.getByText(/Hotel Zoe.*\$320/).first()).toBeVisible();
151+
}
152+
153+
async verifyStaticExperienceData() {
154+
// Wait for experiences to load - this can take time as it's the final step in the agent flow
155+
// First ensure we're not stuck in "No experiences planned yet" state
156+
await expect(this.page.getByText('No experiences planned yet')).not.toBeVisible({ timeout: 20000 }).catch(() => {
157+
console.log('Still waiting for experiences to load...');
158+
});
159+
160+
// Wait for actual experience content to appear
161+
await expect(this.page.locator('.activity-name').first()).toBeVisible({ timeout: 15000 });
162+
163+
// Verify we have meaningful experience content (either static or AI-generated)
164+
const experienceContent = this.page.locator('.activity-name').first().or(
165+
this.page.getByText(/Pier 39|Golden Gate Bridge|Swan Oyster Depot|Tartine Bakery/i).first()
166+
);
167+
await expect(experienceContent).toBeVisible();
168+
}
169+
170+
async verifyItineraryContainsFlight(airline: 'KLM' | 'United') {
171+
// Check that the selected flight appears in the itinerary or conversation
172+
await expect(this.page.getByText(new RegExp(airline, 'i'))).toBeVisible();
173+
}
174+
175+
async verifyItineraryContainsHotel(hotel: 'Zephyr' | 'Ritz-Carlton' | 'Zoe') {
176+
// Check that the selected hotel appears in the itinerary or conversation
177+
const hotelName = hotel === 'Ritz-Carlton' ? 'Ritz-Carlton' : `Hotel ${hotel}`;
178+
await expect(this.page.getByText(new RegExp(hotelName, 'i'))).toBeVisible();
179+
}
180+
181+
async assertAgentReplyVisible(expectedText: RegExp) {
182+
await expect(this.agentMessage.last().getByText(expectedText)).toBeVisible();
183+
}
184+
185+
async assertUserMessageVisible(message: string) {
186+
await expect(this.page.getByText(message)).toBeVisible();
187+
}
188+
189+
async waitForSupervisorCoordination() {
190+
// Wait for supervisor to appear in the conversation
191+
await expect(
192+
this.page.getByText(/supervisor|coordinate|specialist|routing/i).first()
193+
).toBeVisible({ timeout: 15000 });
194+
}
195+
196+
async waitForAgentCompletion() {
197+
// Wait for the travel planning process to complete
198+
await expect(
199+
this.page.getByText(/complete|finished|planning.*done|itinerary.*ready/i).first()
200+
).toBeVisible({ timeout: 30000 });
201+
}
202+
}

‎typescript-sdk/apps/dojo/e2e/tests/langgraphFastAPITests/sharedStatePage.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ test.describe("Shared State Feature", () => {
4444
await page.waitForTimeout(1000);
4545

4646
// Ask chat for all ingredients
47-
await sharedStateAgent.sendMessage("Give me all the ingredients");
47+
await sharedStateAgent.sendMessage("Give me all the ingredients, also list them in your message");
4848
await sharedStateAgent.loader();
4949

5050
// Verify chat response includes both existing and new ingredients

‎typescript-sdk/apps/dojo/e2e/tests/langgraphFastAPITests/subgraphsPage.spec.ts‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import { test, expect, waitForAIResponse, retryOnAIFailure } from "../../test-isolation-helper";
2+
import { SubgraphsPage } from "../../pages/langGraphPages/SubgraphsPage";
3+
4+
test.describe("Subgraphs Travel Agent Feature", () => {
5+
test("[LangGraph] should complete full travel planning flow with feature validation", async ({
6+
page,
7+
}) => {
8+
await retryOnAIFailure(async () => {
9+
const subgraphsPage = new SubgraphsPage(page);
10+
11+
await page.goto("/langgraph-fastapi/feature/subgraphs");
12+
13+
await subgraphsPage.openChat();
14+
15+
// Initiate travel planning
16+
await subgraphsPage.sendMessage("Help me plan a trip to San Francisco");
17+
await waitForAIResponse(page);
18+
19+
// FEATURE TEST: Wait for supervisor coordination
20+
await subgraphsPage.waitForSupervisorCoordination();
21+
await expect(subgraphsPage.supervisorIndicator).toBeVisible({ timeout: 10000 }).catch(() => {
22+
console.log("Supervisor indicator not found, verifying through content");
23+
});
24+
25+
// FEATURE TEST: Flights Agent - verify agent indicator becomes active
26+
await subgraphsPage.waitForFlightsAgent();
27+
await expect(subgraphsPage.flightsAgentIndicator).toBeVisible({ timeout: 10000 }).catch(() => {
28+
console.log("Flights agent indicator not found, checking content instead");
29+
});
30+
31+
await subgraphsPage.verifyStaticFlightData();
32+
33+
// FEATURE TEST: Test interrupt pause behavior - flow shouldn't auto-proceed
34+
await page.waitForTimeout(3000);
35+
// await expect(page.getByText(/hotel.*options|accommodation|Zephyr|Ritz-Carlton|Hotel Zoe/i)).not.toBeVisible();
36+
37+
// Select KLM flight through interrupt
38+
await subgraphsPage.selectFlight('KLM');
39+
40+
// FEATURE TEST: Verify immediate state update after selection
41+
await expect(subgraphsPage.selectedFlight).toContainText('KLM').catch(async () => {
42+
await expect(page.getByText(/KLM/i)).toBeVisible({ timeout: 2000 });
43+
});
44+
45+
await waitForAIResponse(page);
46+
47+
// FEATURE TEST: Hotels Agent - verify agent indicator switches
48+
await subgraphsPage.waitForHotelsAgent();
49+
await expect(subgraphsPage.hotelsAgentIndicator).toBeVisible({ timeout: 10000 }).catch(() => {
50+
console.log("Hotels agent indicator not found, checking content instead");
51+
});
52+
53+
await subgraphsPage.verifyStaticHotelData();
54+
55+
// FEATURE TEST: Test interrupt pause behavior again
56+
await page.waitForTimeout(3000);
57+
58+
// Select Hotel Zoe through interrupt
59+
await subgraphsPage.selectHotel('Zoe');
60+
61+
// FEATURE TEST: Verify hotel selection immediately updates state
62+
await expect(subgraphsPage.selectedHotel).toContainText('Zoe').catch(async () => {
63+
await expect(page.getByText(/Hotel Zoe|Zoe/i)).toBeVisible({ timeout: 2000 });
64+
});
65+
66+
await waitForAIResponse(page);
67+
68+
// FEATURE TEST: Experiences Agent - verify agent indicator becomes active
69+
await subgraphsPage.waitForExperiencesAgent();
70+
await expect(subgraphsPage.experiencesAgentIndicator).toBeVisible({ timeout: 10000 }).catch(() => {
71+
console.log("Experiences agent indicator not found, checking content instead");
72+
});
73+
74+
await subgraphsPage.verifyStaticExperienceData();
75+
});
76+
});
77+
78+
test("[LangGraph] should handle different selections and demonstrate supervisor routing patterns", async ({
79+
page,
80+
}) => {
81+
await retryOnAIFailure(async () => {
82+
const subgraphsPage = new SubgraphsPage(page);
83+
84+
await page.goto("/langgraph-fastapi/feature/subgraphs");
85+
86+
await subgraphsPage.openChat();
87+
88+
await subgraphsPage.sendMessage("I want to visit San Francisco from Amsterdam");
89+
await waitForAIResponse(page);
90+
91+
// FEATURE TEST: Wait for supervisor coordination
92+
await subgraphsPage.waitForSupervisorCoordination();
93+
await expect(subgraphsPage.supervisorIndicator).toBeVisible({ timeout: 10000 }).catch(() => {
94+
console.log("Supervisor indicator not found, verifying through content");
95+
});
96+
97+
// FEATURE TEST: Flights Agent - verify agent indicator becomes active
98+
await subgraphsPage.waitForFlightsAgent();
99+
await expect(subgraphsPage.flightsAgentIndicator).toBeVisible({ timeout: 10000 }).catch(() => {
100+
console.log("Flights agent indicator not found, checking content instead");
101+
});
102+
103+
await subgraphsPage.verifyStaticFlightData();
104+
105+
await page.waitForTimeout(3000);
106+
// FEATURE TEST: Test different selection - United instead of KLM
107+
await subgraphsPage.selectFlight('United');
108+
109+
// FEATURE TEST: Verify immediate state update after selection
110+
await expect(subgraphsPage.selectedFlight).toContainText('United').catch(async () => {
111+
await expect(page.getByText(/United/i)).toBeVisible({ timeout: 2000 });
112+
});
113+
114+
await waitForAIResponse(page);
115+
116+
// FEATURE TEST: Hotels Agent - verify agent indicator switches
117+
await subgraphsPage.waitForHotelsAgent();
118+
await expect(subgraphsPage.hotelsAgentIndicator).toBeVisible({ timeout: 10000 }).catch(() => {
119+
console.log("Hotels agent indicator not found, checking content instead");
120+
});
121+
122+
await subgraphsPage.verifyStaticHotelData();
123+
124+
// FEATURE TEST: Test interrupt pause behavior again
125+
await page.waitForTimeout(3000);
126+
127+
// FEATURE TEST: Test different hotel selection - Ritz-Carlton
128+
await subgraphsPage.selectHotel('Ritz-Carlton');
129+
130+
// FEATURE TEST: Verify hotel selection immediately updates state
131+
await expect(subgraphsPage.selectedHotel).toContainText('Ritz-Carlton').catch(async () => {
132+
await expect(page.getByText(/Ritz-Carlton/i)).toBeVisible({ timeout: 2000 });
133+
});
134+
135+
await waitForAIResponse(page);
136+
137+
// FEATURE TEST: Experiences Agent - verify agent indicator becomes active
138+
await subgraphsPage.waitForExperiencesAgent();
139+
await expect(subgraphsPage.experiencesAgentIndicator).toBeVisible({ timeout: 10000 }).catch(() => {
140+
console.log("Experiences agent indicator not found, checking content instead");
141+
});
142+
143+
// FEATURE TEST: Verify subgraph streaming detection - experiences agent is active
144+
await expect(subgraphsPage.experiencesAgentIndicator).toHaveClass(/active/).catch(() => {
145+
console.log("Experiences agent not active, checking content instead");
146+
});
147+
148+
// FEATURE TEST: Verify complete state persistence across all agents
149+
await expect(subgraphsPage.selectedFlight).toContainText('United'); // Flight selection persisted
150+
await expect(subgraphsPage.selectedHotel).toContainText('Ritz-Carlton'); // Hotel selection persisted
151+
await subgraphsPage.verifyStaticExperienceData(); // Experiences provided based on selections
152+
});
153+
});
154+
});

0 commit comments

Comments
 (0)