create sampling response form

client/src/components/SamplingTab.tsx

@@ -1,11 +1,10 @@
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
 import { TabsContent } from "@/components/ui/tabs";
 import {
   CreateMessageRequest,
   CreateMessageResult,
 } from "@modelcontextprotocol/sdk/types.js";
-import JsonView from "./JsonView";
+import SamplingRequest from "./SamplingRequest";
 
 export type PendingRequest = {
   id: number;
@@ -19,21 +18,8 @@ export type Props = {
 };
 
 const SamplingTab = ({ pendingRequests, onApprove, onReject }: Props) => {
-  const handleApprove = (id: number) => {
-    // For now, just return a stub response
-    onApprove(id, {
-      model: "stub-model",
-      stopReason: "endTurn",
-      role: "assistant",
-      content: {
-        type: "text",
-        text: "This is a stub response.",
-      },
-    });
-  };
-
   return (
-    <TabsContent value="sampling" className="h-96">
+    <TabsContent value="sampling" className="mh-96">
       <Alert>
         <AlertDescription>
           When the server requests LLM sampling, requests will appear here for
@@ -43,19 +29,12 @@ const SamplingTab = ({ pendingRequests, onApprove, onReject }: Props) => {
       <div className="mt-4 space-y-4">
         <h3 className="text-lg font-semibold">Recent Requests</h3>
         {pendingRequests.map((request) => (
-          <div key={request.id} className="p-4 border rounded-lg space-y-4">
-            <JsonView
-              className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 rounded"
-              data={JSON.stringify(request.request)}
-            />
-
-            <div className="flex space-x-2">
-              <Button onClick={() => handleApprove(request.id)}>Approve</Button>
-              <Button variant="outline" onClick={() => onReject(request.id)}>
-                Reject
-              </Button>
-            </div>
-          </div>
+          <SamplingRequest
+            key={request.id}
+            request={request}
+            onApprove={onApprove}
+            onReject={onReject}
+          />
         ))}
         {pendingRequests.length === 0 && (
           <p className="text-gray-500">No pending requests</p>