Refactor renamed the component groups to something less obtuse:
Elements -> Groups -> Screens -> Views
This commit is contained in:
cliffhall
parent
ca6de91a96
commit
dd46acba87
2 changed files with 151 additions and 144 deletions
|
|
@ -0,0 +1,100 @@
|
|||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import { fn } from "storybook/test";
|
||||
import { SamplingRequestPanel } from "./SamplingRequestPanel";
|
||||
|
||||
const meta: Meta<typeof SamplingRequestPanel> = {
|
||||
title: "Groups/SamplingRequestPanel",
|
||||
component: SamplingRequestPanel,
|
||||
args: {
|
||||
responseText: "",
|
||||
modelUsed: "claude-3-sonnet",
|
||||
stopReason: "end_turn",
|
||||
onResponseChange: fn(),
|
||||
onModelChange: fn(),
|
||||
onStopReasonChange: fn(),
|
||||
onAutoRespond: fn(),
|
||||
onSend: fn(),
|
||||
onReject: fn(),
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof SamplingRequestPanel>;
|
||||
|
||||
export const SimpleRequest: Story = {
|
||||
args: {
|
||||
messages: [{ role: "user", content: "What is the capital of France?" }],
|
||||
},
|
||||
};
|
||||
|
||||
export const WithModelHints: Story = {
|
||||
args: {
|
||||
messages: [{ role: "user", content: "Summarize this document for me." }],
|
||||
modelHints: ["claude-3-sonnet", "gpt-4"],
|
||||
},
|
||||
};
|
||||
|
||||
export const WithPriorities: Story = {
|
||||
args: {
|
||||
messages: [{ role: "user", content: "Translate this text to Spanish." }],
|
||||
modelHints: ["claude-3-sonnet"],
|
||||
costPriority: 0.3,
|
||||
speedPriority: 0.5,
|
||||
intelligencePriority: 0.9,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithAllParams: Story = {
|
||||
args: {
|
||||
messages: [
|
||||
{ role: "user", content: "Write a haiku about programming." },
|
||||
{ role: "assistant", content: "Here is a haiku:" },
|
||||
],
|
||||
maxTokens: 1024,
|
||||
stopSequences: ["\n\n", "END"],
|
||||
temperature: 0.7,
|
||||
includeContext: "thisServer",
|
||||
},
|
||||
};
|
||||
|
||||
export const WithTools: Story = {
|
||||
args: {
|
||||
messages: [
|
||||
{ role: "user", content: "Look up the weather in San Francisco." },
|
||||
],
|
||||
tools: [
|
||||
{
|
||||
name: "get_weather",
|
||||
description: "Get the current weather for a given location.",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
location: { type: "string", description: "City name" },
|
||||
},
|
||||
required: ["location"],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "search_web",
|
||||
description: "Search the web for information.",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
query: { type: "string", description: "Search query" },
|
||||
},
|
||||
required: ["query"],
|
||||
},
|
||||
},
|
||||
],
|
||||
toolChoice: "auto",
|
||||
},
|
||||
};
|
||||
|
||||
export const PrefilledResponse: Story = {
|
||||
args: {
|
||||
messages: [{ role: "user", content: "What is 2 + 2?" }],
|
||||
responseText: "The answer is 4.",
|
||||
modelUsed: "claude-3-haiku",
|
||||
stopReason: "end_turn",
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Divider,
|
||||
Group,
|
||||
Paper,
|
||||
Select,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Textarea,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { MessageBubble } from "../../elements/MessageBubble/MessageBubble";
|
||||
|
||||
export interface SamplingMessage {
|
||||
role: string;
|
||||
content: string;
|
||||
imageContent?: { data: string; mimeType: string };
|
||||
}
|
||||
|
||||
export interface SamplingTool {
|
||||
name: string;
|
||||
description?: string;
|
||||
inputSchema: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface SamplingRequestPanelProps {
|
||||
messages: SamplingMessage[];
|
||||
modelHints?: string[];
|
||||
costPriority?: number;
|
||||
speedPriority?: number;
|
||||
intelligencePriority?: number;
|
||||
maxTokens?: number;
|
||||
stopSequences?: string[];
|
||||
temperature?: number;
|
||||
includeContext?: string;
|
||||
tools?: SamplingTool[];
|
||||
toolChoice?: string;
|
||||
responseText: string;
|
||||
modelUsed: string;
|
||||
stopReason: string;
|
||||
onResponseChange: (text: string) => void;
|
||||
onModelChange: (model: string) => void;
|
||||
onStopReasonChange: (reason: string) => void;
|
||||
onAutoRespond: () => void;
|
||||
onSend: () => void;
|
||||
onReject: () => void;
|
||||
}
|
||||
|
||||
function formatPriority(value: number): string {
|
||||
if (value < 0.4) return `low (${value})`;
|
||||
if (value <= 0.7) return `medium (${value})`;
|
||||
return `high (${value})`;
|
||||
}
|
||||
|
||||
function formatOptional(value: unknown, fallback: string): string {
|
||||
return value !== undefined ? String(value) : fallback;
|
||||
}
|
||||
|
||||
function serializeJson(value: unknown): string {
|
||||
return JSON.stringify(value);
|
||||
}
|
||||
|
||||
const HintText = Text.withProps({
|
||||
size: "sm",
|
||||
c: "dimmed",
|
||||
});
|
||||
|
||||
const PreferencesContainer = Paper.withProps({
|
||||
p: "sm",
|
||||
withBorder: true,
|
||||
});
|
||||
|
||||
const ToolCard = Paper.withProps({
|
||||
p: "xs",
|
||||
withBorder: true,
|
||||
});
|
||||
|
||||
const ToolName = Text.withProps({
|
||||
size: "sm",
|
||||
fw: 600,
|
||||
});
|
||||
|
||||
const RejectButton = Button.withProps({
|
||||
variant: "light",
|
||||
color: "red",
|
||||
});
|
||||
|
||||
export function SamplingRequestPanel({
|
||||
messages,
|
||||
modelHints,
|
||||
costPriority,
|
||||
speedPriority,
|
||||
intelligencePriority,
|
||||
maxTokens,
|
||||
stopSequences,
|
||||
temperature,
|
||||
includeContext,
|
||||
tools,
|
||||
toolChoice,
|
||||
responseText,
|
||||
modelUsed,
|
||||
stopReason,
|
||||
onResponseChange,
|
||||
onModelChange,
|
||||
onStopReasonChange,
|
||||
onAutoRespond,
|
||||
onSend,
|
||||
onReject,
|
||||
}: SamplingRequestPanelProps) {
|
||||
return (
|
||||
<Stack gap="md">
|
||||
<HintText>The server is requesting an LLM completion.</HintText>
|
||||
|
||||
<Title order={5}>Messages:</Title>
|
||||
{messages.map((message, index) => (
|
||||
<MessageBubble
|
||||
key={index}
|
||||
index={index}
|
||||
role={message.role as "user" | "assistant"}
|
||||
content={message.content}
|
||||
imageContent={message.imageContent}
|
||||
/>
|
||||
))}
|
||||
|
||||
{modelHints && modelHints.length > 0 && (
|
||||
<PreferencesContainer>
|
||||
<Stack gap="xs">
|
||||
<Title order={5}>Model Preferences:</Title>
|
||||
<Group gap="xs">
|
||||
<Text size="sm">Hints:</Text>
|
||||
{modelHints.map((hint) => (
|
||||
<Badge key={hint}>{hint}</Badge>
|
||||
))}
|
||||
</Group>
|
||||
{costPriority !== undefined && (
|
||||
<Text size="sm">
|
||||
Cost Priority: {formatPriority(costPriority)}
|
||||
</Text>
|
||||
)}
|
||||
{speedPriority !== undefined && (
|
||||
<Text size="sm">
|
||||
Speed Priority: {formatPriority(speedPriority)}
|
||||
</Text>
|
||||
)}
|
||||
{intelligencePriority !== undefined && (
|
||||
<Text size="sm">
|
||||
Intelligence Priority: {formatPriority(intelligencePriority)}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</PreferencesContainer>
|
||||
)}
|
||||
|
||||
<Title order={5}>Parameters:</Title>
|
||||
<Text size="sm">
|
||||
Max Tokens: {formatOptional(maxTokens, "not specified")}
|
||||
</Text>
|
||||
<Text size="sm">
|
||||
Stop Sequences:{" "}
|
||||
{stopSequences ? serializeJson(stopSequences) : "not specified"}
|
||||
</Text>
|
||||
<Text size="sm">
|
||||
Temperature: {formatOptional(temperature, "not specified")}
|
||||
</Text>
|
||||
|
||||
{includeContext && (
|
||||
<Group gap="xs">
|
||||
<Text size="sm">Include Context:</Text>
|
||||
<Badge>{includeContext}</Badge>
|
||||
</Group>
|
||||
)}
|
||||
|
||||
{tools && tools.length > 0 && (
|
||||
<>
|
||||
<Title order={5}>Available Tools:</Title>
|
||||
{tools.map((tool) => (
|
||||
<ToolCard key={tool.name}>
|
||||
<ToolName>{tool.name}</ToolName>
|
||||
{tool.description && <Text size="sm">{tool.description}</Text>}
|
||||
</ToolCard>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{toolChoice && <Text size="sm">Tool Choice: {toolChoice}</Text>}
|
||||
|
||||
<Divider />
|
||||
|
||||
<Title order={5}>Response:</Title>
|
||||
<Textarea
|
||||
value={responseText}
|
||||
onChange={(event) => onResponseChange(event.currentTarget.value)}
|
||||
autosize
|
||||
minRows={3}
|
||||
/>
|
||||
<Group>
|
||||
<TextInput
|
||||
label="Model Used"
|
||||
value={modelUsed}
|
||||
onChange={(event) => onModelChange(event.currentTarget.value)}
|
||||
/>
|
||||
<Select
|
||||
label="Stop Reason"
|
||||
data={["end_turn", "max_tokens", "stop_sequence", "toolUse"]}
|
||||
value={stopReason}
|
||||
onChange={(value) => onStopReasonChange(value ?? "")}
|
||||
/>
|
||||
</Group>
|
||||
<Group justify="flex-end">
|
||||
<Button variant="light" onClick={onAutoRespond}>
|
||||
Auto-respond
|
||||
</Button>
|
||||
<RejectButton onClick={onReject}>Reject</RejectButton>
|
||||
<Button onClick={onSend}>Send Response</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue