create sampling response form

client/src/components/__tests__/samplingRequest.test.tsx

@@ -0,0 +1,73 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import SamplingRequest from "../SamplingRequest";
+import { PendingRequest } from "../SamplingTab";
+
+const mockRequest: PendingRequest = {
+  id: 1,
+  request: {
+    method: "sampling/createMessage",
+    params: {
+      messages: [
+        {
+          role: "user",
+          content: {
+            type: "text",
+            text: "What files are in the current directory?",
+          },
+        },
+      ],
+      systemPrompt: "You are a helpful file system assistant.",
+      includeContext: "thisServer",
+      maxTokens: 100,
+    },
+  },
+};
+
+describe("Form to handle sampling response", () => {
+  const mockOnApprove = jest.fn();
+  const mockOnReject = jest.fn();
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should call onApprove with correct text content when Approve button is clicked", () => {
+    render(
+      <SamplingRequest
+        request={mockRequest}
+        onApprove={mockOnApprove}
+        onReject={mockOnReject}
+      />,
+    );
+
+    // Click the Approve button
+    fireEvent.click(screen.getByRole("button", { name: /approve/i }));
+
+    // Assert that onApprove is called with the correct arguments
+    expect(mockOnApprove).toHaveBeenCalledWith(mockRequest.id, {
+      model: "GPT-4o",
+      stopReason: "endTurn",
+      role: "assistant",
+      content: {
+        type: "text",
+        text: "",
+      },
+    });
+  });
+
+  it("should call onReject with correct request id when Reject button is clicked", () => {
+    render(
+      <SamplingRequest
+        request={mockRequest}
+        onApprove={mockOnApprove}
+        onReject={mockOnReject}
+      />,
+    );
+
+    // Click the Approve button
+    fireEvent.click(screen.getByRole("button", { name: /Reject/i }));
+
+    // Assert that onApprove is called with the correct arguments
+    expect(mockOnReject).toHaveBeenCalledWith(mockRequest.id);
+  });
+});

client/src/components/__tests__/samplingTab.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from "@testing-library/react";
+import { Tabs } from "@/components/ui/tabs";
+import SamplingTab, { PendingRequest } from "../SamplingTab";
+
+describe("Sampling tab", () => {
+  const mockOnApprove = jest.fn();
+  const mockOnReject = jest.fn();
+
+  const renderSamplingTab = (pendingRequests: PendingRequest[]) =>
+    render(
+      <Tabs defaultValue="sampling">
+        <SamplingTab
+          pendingRequests={pendingRequests}
+          onApprove={mockOnApprove}
+          onReject={mockOnReject}
+        />
+      </Tabs>,
+    );
+
+  it("should render 'No pending requests' when there are no pending requests", () => {
+    renderSamplingTab([]);
+    expect(
+      screen.getByText(
+        "When the server requests LLM sampling, requests will appear here for approval.",
+      ),
+    ).toBeTruthy();
+    expect(screen.findByText("No pending requests")).toBeTruthy();
+  });
+
+  it("should render the correct number of requests", () => {
+    renderSamplingTab(
+      Array.from({ length: 5 }, (_, i) => ({
+        id: i,
+        request: {
+          method: "sampling/createMessage",
+          params: {
+            messages: [
+              {
+                role: "user",
+                content: {
+                  type: "text",
+                  text: "What files are in the current directory?",
+                },
+              },
+            ],
+            systemPrompt: "You are a helpful file system assistant.",
+            includeContext: "thisServer",
+            maxTokens: 100,
+          },
+        },
+      })),
+    );
+    expect(screen.getAllByTestId("sampling-request").length).toBe(5);
+  });
+});