diff --git a/clients/web/src/components/groups/InlineSamplingRequest/InlineSamplingRequest.stories.tsx b/clients/web/src/components/groups/InlineSamplingRequest/InlineSamplingRequest.stories.tsx index a245cf5dd..aef6897b9 100644 --- a/clients/web/src/components/groups/InlineSamplingRequest/InlineSamplingRequest.stories.tsx +++ b/clients/web/src/components/groups/InlineSamplingRequest/InlineSamplingRequest.stories.tsx @@ -1,5 +1,8 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import type { CreateMessageRequestParams } from "@modelcontextprotocol/sdk/types.js"; +import type { + CreateMessageRequestParams, + CreateMessageResult, +} from "@modelcontextprotocol/sdk/types.js"; import { fn } from "storybook/test"; import { InlineSamplingRequest } from "./InlineSamplingRequest"; @@ -16,13 +19,31 @@ const defaultRequest: CreateMessageRequestParams = { maxTokens: 1024, }; +const textDraft: CreateMessageResult = { + role: "assistant", + model: "claude-sonnet-4-20250514", + content: { + type: "text", + text: "The code looks good overall. Consider extracting the repeated logic into a helper function and adding type annotations to the public API.", + }, +}; + +const imageDraft: CreateMessageResult = { + role: "assistant", + model: "claude-sonnet-4-20250514", + content: { + type: "image", + data: "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=", + mimeType: "image/png", + }, +}; + const meta: Meta = { title: "Groups/InlineSamplingRequest", component: InlineSamplingRequest, args: { request: defaultRequest, queuePosition: "1 of 1", - responseText: "", onAutoRespond: fn(), onEditAndSend: fn(), onReject: fn(), @@ -49,10 +70,15 @@ export const WithModelHints: Story = { }, }; -export const PrefilledResponse: Story = { +export const WithTextDraft: Story = { + args: { + draftResult: textDraft, + }, +}; + +export const WithNonTextDraft: Story = { args: { - responseText: - "The code looks good overall. Consider extracting the repeated logic into a helper function.", + draftResult: imageDraft, }, }; diff --git a/clients/web/src/components/groups/InlineSamplingRequest/InlineSamplingRequest.tsx b/clients/web/src/components/groups/InlineSamplingRequest/InlineSamplingRequest.tsx index afa7582ae..0c453c4a6 100644 --- a/clients/web/src/components/groups/InlineSamplingRequest/InlineSamplingRequest.tsx +++ b/clients/web/src/components/groups/InlineSamplingRequest/InlineSamplingRequest.tsx @@ -1,18 +1,13 @@ -import { - Badge, - Button, - Group, - Paper, - Stack, - Text, - Textarea, -} from "@mantine/core"; -import type { CreateMessageRequestParams } from "@modelcontextprotocol/sdk/types.js"; +import { Badge, Button, Group, Paper, Stack, Text } from "@mantine/core"; +import type { + CreateMessageRequestParams, + CreateMessageResult, +} from "@modelcontextprotocol/sdk/types.js"; export interface InlineSamplingRequestProps { request: CreateMessageRequestParams; queuePosition: string; - responseText: string; + draftResult?: CreateMessageResult; onAutoRespond: () => void; onEditAndSend: () => void; onReject: () => void; @@ -35,6 +30,11 @@ const PreviewText = Text.withProps({ lineClamp: 2, }); +const DraftPreview = Text.withProps({ + size: "sm", + lineClamp: 2, +}); + const DetailButton = Button.withProps({ variant: "subtle", size: "xs", @@ -67,6 +67,17 @@ function extractPreview(request: CreateMessageRequestParams): string { return content.type === "text" ? content.text : `[${content.type}]`; } +function extractDraftPreview(draft: CreateMessageResult): string { + switch (draft.content.type) { + case "text": + return draft.content.text; + case "image": + return "[Image content]"; + case "audio": + return "[Audio content]"; + } +} + function extractModelHints( request: CreateMessageRequestParams, ): string[] | undefined { @@ -82,7 +93,7 @@ function formatModelHints(hints: string[]): string { export function InlineSamplingRequest({ request, queuePosition, - responseText, + draftResult, onAutoRespond, onEditAndSend, onReject, @@ -90,6 +101,7 @@ export function InlineSamplingRequest({ }: InlineSamplingRequestProps) { const modelHints = extractModelHints(request); const messagePreview = extractPreview(request); + const draftPreview = draftResult ? extractDraftPreview(draftResult) : null; return ( @@ -105,14 +117,7 @@ export function InlineSamplingRequest({ View Details -