ADK Middleware Integration

.gitignore

@@ -1,2 +1,3 @@
+**/.claude/settings.local.json
 .vscode/
 .idea/

typescript-sdk/.gitignore

@@ -44,4 +44,5 @@ packages/proto/src/generated
 **/**/.langgraph_api
 
 # Python
+venv
 __pycache__/

typescript-sdk/apps/dojo/e2e/pages/adkMiddlewarePages/HumanInLoopPage.ts

@@ -0,0 +1,91 @@
+import { Page, Locator, expect } from '@playwright/test';
+
+export class HumanInLoopPage {
+  readonly page: Page;
+  readonly planTaskButton: Locator;
+  readonly chatInput: Locator;
+  readonly sendButton: Locator;
+  readonly agentGreeting: Locator;
+  readonly plan: Locator;
+  readonly performStepsButton: Locator;
+  readonly agentMessage: Locator;
+  readonly userMessage: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.planTaskButton = page.getByRole('button', { name: 'Human in the loop Plan a task' });
+    this.agentGreeting = page.getByText("Hi, I'm an agent specialized in helping you with your tasks. How can I help you?");
+    this.chatInput = page.getByRole('textbox', { name: 'Type a message...' });
+    this.sendButton = page.locator('[data-test-id="copilot-chat-ready"]');
+    this.plan = page.getByTestId('select-steps');
+    this.performStepsButton = page.getByRole('button', { name: 'Confirm' });
+    this.agentMessage = page.locator('.copilotKitAssistantMessage');
+    this.userMessage = page.locator('.copilotKitUserMessage');
+  }
+
+  async openChat() {
+    await this.agentGreeting.isVisible();
+  }
+
+  async sendMessage(message: string) {
+    await this.chatInput.click();
+    await this.chatInput.fill(message);
+    await this.sendButton.click();
+  }
+
+  async selectItemsInPlanner() {
+    await expect(this.plan).toBeVisible({ timeout: 10000 });
+    await this.plan.click();
+  }
+
+  async getPlannerOnClick(name: string | RegExp) {
+    return this.page.getByRole('button', { name });
+  }
+
+  async uncheckItem(identifier: number | string): Promise<string> {
+    const plannerContainer = this.page.getByTestId('select-steps');
+    const items = plannerContainer.getByTestId('step-item');
+
+    let item;
+    if (typeof identifier === 'number') {
+      item = items.nth(identifier);
+    } else {
+      item = items.filter({
+        has: this.page.getByTestId('step-text').filter({ hasText: identifier })
+      }).first();
+    }
+    const stepTextElement = item.getByTestId('step-text');
+    const text = await stepTextElement.innerText();
+    await item.click();
+
+    return text;
+  }
+
+  async isStepItemUnchecked(target: number | string): Promise<boolean> {
+    const plannerContainer = this.page.getByTestId('select-steps');
+    const items = plannerContainer.getByTestId('step-item');
+
+    let item;
+    if (typeof target === 'number') {
+      item = items.nth(target);
+    } else {
+      item = items.filter({
+        has: this.page.getByTestId('step-text').filter({ hasText: target })
+      }).first();
+    }
+    const checkbox = item.locator('input[type="checkbox"]');
+    return !(await checkbox.isChecked());
+  }
+
+  async performSteps() {
+    await this.performStepsButton.click();
+  }
+
+  async assertAgentReplyVisible(expectedText: RegExp) {
+    await expect(this.agentMessage.last().getByText(expectedText)).toBeVisible();
+  }
+
+  async assertUserMessageVisible(message: string) {
+    await expect(this.page.getByText(message)).toBeVisible();
+  }
+}

typescript-sdk/apps/dojo/e2e/pages/adkMiddlewarePages/PredictiveStateUpdatesPage.ts

@@ -0,0 +1,104 @@
+import { Page, Locator, expect } from '@playwright/test';
+
+export class PredictiveStateUpdatesPage {
+  readonly page: Page;
+  readonly chatInput: Locator;
+  readonly sendButton: Locator;
+  readonly agentGreeting: Locator;
+  readonly agentResponsePrompt: Locator;
+  readonly userApprovalModal: Locator;
+  readonly approveButton: Locator;
+  readonly acceptedButton: Locator;
+  readonly confirmedChangesResponse: Locator;
+  readonly rejectedChangesResponse: Locator;
+  readonly agentMessage: Locator;
+  readonly userMessage: Locator;
+  readonly highlights: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.agentGreeting = page.getByText("Hi 👋 How can I help with your document?");
+    this.chatInput = page.getByRole('textbox', { name: 'Type a message...' });
+    this.sendButton = page.locator('[data-test-id="copilot-chat-ready"]');
+    this.agentResponsePrompt = page.locator('div.tiptap.ProseMirror');
+    this.userApprovalModal = page.locator('div.bg-white.rounded.shadow-lg >> text=Confirm Changes');
+    this.acceptedButton = page.getByText('✓ Accepted');
+    this.confirmedChangesResponse = page.locator('div.copilotKitMarkdown').first();
+    this.rejectedChangesResponse = page.locator('div.copilotKitMarkdown').last();
+    this.highlights = page.locator('.tiptap em');
+    this.agentMessage = page.locator('.copilotKitAssistantMessage');
+    this.userMessage = page.locator('.copilotKitUserMessage');
+  }
+
+  async openChat() {
+    await this.agentGreeting.isVisible();
+  }
+
+  async sendMessage(message: string) {
+    await this.chatInput.click();
+    await this.chatInput.fill(message);
+    await this.sendButton.click();
+  }
+
+  async getPredictiveResponse() {
+    await expect(this.agentResponsePrompt).toBeVisible({ timeout: 10000 });
+    await this.agentResponsePrompt.click();
+  }
+
+  async getButton(page, buttonName) {
+    return page.getByRole('button', { name: buttonName }).click();
+  }
+
+  async getStatusLabelOfButton(page, statusText) {
+    return page.getByText(statusText, { exact: true });
+  }
+
+  async getUserApproval() {
+    await this.userApprovalModal.last().isVisible();
+    await this.getButton(this.page, "Confirm");
+    const acceptedLabel = this.userApprovalModal.last().locator('text=✓ Accepted');
+  }
+
+  async getUserRejection() {
+    await this.userApprovalModal.last().isVisible();
+    await this.getButton(this.page, "Reject");
+    const rejectedLabel = await this.getStatusLabelOfButton(this.page, "✕ Rejected");
+    await rejectedLabel.isVisible();
+  }
+
+  async verifyAgentResponse(dragonName) {
+    const paragraphWithName = await this.page.locator(`div.tiptap >> text=${dragonName}`).first();
+
+    const fullText = await paragraphWithName.textContent();
+    if (!fullText) {
+      return null;
+    }
+
+    const match = fullText.match(new RegExp(dragonName, 'i'));
+    return match ? match[0] : null;
+  }
+
+  async verifyHighlightedText(){
+    const highlightSelectors = [
+      '.tiptap em',
+      '.tiptap s',
+      'div.tiptap em',
+      'div.tiptap s'
+    ];
+
+    let count = 0;
+    for (const selector of highlightSelectors) {
+      count = await this.page.locator(selector).count();
+      if (count > 0) {
+        break;
+      }
+    }
+
+    if (count > 0) {
+      expect(count).toBeGreaterThan(0);
+    } else {
+      const modal = this.page.locator('div.bg-white.rounded.shadow-lg');
+      await expect(modal).toBeVisible();
+    }
+  }
+}

typescript-sdk/apps/dojo/e2e/tests/adkMiddlewareTests/agenticChatPage.spec.ts

@@ -0,0 +1,115 @@
+import {
+  test,
+  expect,
+  waitForAIResponse,
+  retryOnAIFailure,
+} from "../../test-isolation-helper";
+import { AgenticChatPage } from "../../featurePages/AgenticChatPage";
+
+
+test.describe("Agentic Chat Feature", () => {
+  test("[ADK Middleware] Agentic Chat sends and receives a message", async ({
+    page,
+  }) => {
+    await retryOnAIFailure(async () => {
+      await page.goto(
+        "/adk-middleware/feature/agentic_chat"
+      );
+
+      const chat = new AgenticChatPage(page);
+
+      await chat.openChat();
+      await chat.agentGreeting.isVisible;
+      await chat.sendMessage("Hello, I am duaa.");
+
+      await waitForAIResponse(page);
+      await chat.assertUserMessageVisible("Hello, I am duaa.");
+      await chat.assertAgentReplyVisible(/Hello/i);
+    });
+  });
+
+  test("[ADK Middleware] Agentic Chat changes background on message and reset", async ({
+    page,
+  }) => {
+    await retryOnAIFailure(async () => {
+      await page.goto(
+        "/adk-middleware/feature/agentic_chat"
+      );
+
+      const chat = new AgenticChatPage(page);
+
+      await chat.openChat();
+      await chat.agentGreeting.waitFor({ state: "visible" });
+
+      // Store initial background color
+      const initialBackground = await chat.getBackground();
+      console.log("Initial background color:", initialBackground);
+
+      // 1. Send message to change background to blue
+      await chat.sendMessage("Hi change the background color to blue");
+      await chat.assertUserMessageVisible(
+        "Hi change the background color to blue"
+      );
+      await waitForAIResponse(page);
+
+      const backgroundBlue = await chat.getBackground();
+      expect(backgroundBlue).not.toBe(initialBackground);
+      // Check if background is blue (string color name or contains blue)
+      expect(backgroundBlue.toLowerCase()).toMatch(/blue|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
+
+      // 2. Change to pink
+      await chat.sendMessage("Hi change the background color to pink");
+      await chat.assertUserMessageVisible(
+        "Hi change the background color to pink"
+      );
+      await waitForAIResponse(page);
+
+      const backgroundPink = await chat.getBackground();
+      expect(backgroundPink).not.toBe(backgroundBlue);
+      // Check if background is pink (string color name or contains pink)
+      expect(backgroundPink.toLowerCase()).toMatch(/pink|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
+
+      // 3. Reset to default
+      await chat.sendMessage("Reset the background color");
+      await chat.assertUserMessageVisible("Reset the background color");
+      await waitForAIResponse(page);
+    });
+  });
+
+  test("[ADK Middleware] Agentic Chat retains memory of user messages during a conversation", async ({
+    page,
+  }) => {
+    await retryOnAIFailure(async () => {
+      await page.goto(
+        "/adk-middleware/feature/agentic_chat"
+      );
+
+      const chat = new AgenticChatPage(page);
+      await chat.openChat();
+      await chat.agentGreeting.click();
+
+      await chat.sendMessage("Hey there");
+      await chat.assertUserMessageVisible("Hey there");
+      await waitForAIResponse(page);
+      await chat.assertAgentReplyVisible(/how can I assist you/i);
+
+      const favFruit = "Mango";
+      await chat.sendMessage(`My favorite fruit is ${favFruit}`);
+      await chat.assertUserMessageVisible(`My favorite fruit is ${favFruit}`);
+      await waitForAIResponse(page);
+      await chat.assertAgentReplyVisible(new RegExp(favFruit, "i"));
+
+      await chat.sendMessage("and I love listening to Kaavish");
+      await chat.assertUserMessageVisible("and I love listening to Kaavish");
+      await waitForAIResponse(page);
+      await chat.assertAgentReplyVisible(/Kaavish/i);
+
+      await chat.sendMessage("Can you remind me what my favorite fruit is?");
+      await chat.assertUserMessageVisible(
+        "Can you remind me what my favorite fruit is?"
+      );
+      await waitForAIResponse(page);
+      await chat.assertAgentReplyVisible(new RegExp(favFruit, "i"));
+    });
+  });
+});