wehub-resource-sync
1359 lines
49 KiB
TypeScript
1359 lines
49 KiB
TypeScript
import type { UIMessage } from "@ai-sdk/react";
|
||
import { useChat } from "@ai-sdk/react";
|
||
import { BoltIcon, CheckIcon, StopIcon } from "@heroicons/react/20/solid";
|
||
import { ClipboardIcon, TrashIcon } from "@heroicons/react/24/outline";
|
||
import { type MetaFunction } from "@remix-run/node";
|
||
import { Link, useFetcher, useNavigate, useRouteLoaderData } from "@remix-run/react";
|
||
import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
|
||
import { generateJWT as internal_generateJWT, MachinePresetName } from "@trigger.dev/core/v3";
|
||
import { TriggerChatTransport } from "@trigger.dev/sdk/chat";
|
||
import { useCallback, useEffect, useRef, useState } from "react";
|
||
import { typedjson, useTypedLoaderData } from "remix-typedjson";
|
||
import { CubeSparkleIcon } from "~/assets/icons/CubeSparkleIcon";
|
||
import { PlusIcon } from "~/assets/icons/PlusIcon";
|
||
import { RunsIcon } from "~/assets/icons/RunsIcon";
|
||
import { JSONEditor } from "~/components/code/JSONEditor";
|
||
import { Button } from "~/components/primitives/Buttons";
|
||
import {
|
||
ClientTabs,
|
||
ClientTabsContent,
|
||
ClientTabsList,
|
||
ClientTabsTrigger,
|
||
} from "~/components/primitives/ClientTabs";
|
||
import { DateTime } from "~/components/primitives/DateTime";
|
||
import { DurationPicker } from "~/components/primitives/DurationPicker";
|
||
import { Header3 } from "~/components/primitives/Headers";
|
||
import { Hint } from "~/components/primitives/Hint";
|
||
import { Input } from "~/components/primitives/Input";
|
||
import { InputGroup } from "~/components/primitives/InputGroup";
|
||
import { Label } from "~/components/primitives/Label";
|
||
import { Paragraph } from "~/components/primitives/Paragraph";
|
||
import {
|
||
Popover,
|
||
PopoverContent,
|
||
PopoverMenuItem,
|
||
PopoverVerticalEllipseTrigger,
|
||
} from "~/components/primitives/Popover";
|
||
import {
|
||
ResizableHandle,
|
||
ResizablePanel,
|
||
ResizablePanelGroup,
|
||
} from "~/components/primitives/Resizable";
|
||
import { Select, SelectItem } from "~/components/primitives/Select";
|
||
import { Spinner } from "~/components/primitives/Spinner";
|
||
import { SimpleTooltip } from "~/components/primitives/Tooltip";
|
||
import { MessageBubble } from "~/components/runs/v3/agent/AgentMessageView";
|
||
import { RunTagInput } from "~/components/runs/v3/RunTagInput";
|
||
import { env as serverEnv } from "~/env.server";
|
||
import { useAutoScrollToBottom } from "~/hooks/useAutoScrollToBottom";
|
||
import { useEnvironment } from "~/hooks/useEnvironment";
|
||
import { useOrganization } from "~/hooks/useOrganizations";
|
||
import { useProject } from "~/hooks/useProject";
|
||
import { findProjectBySlug } from "~/models/project.server";
|
||
import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
|
||
import type { PlaygroundConversation } from "~/presenters/v3/PlaygroundPresenter.server";
|
||
import { playgroundPresenter } from "~/presenters/v3/PlaygroundPresenter.server";
|
||
import { AIPayloadTabContent } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/AIPayloadTabContent";
|
||
import { SchemaTabContent } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/SchemaTabContent";
|
||
import { extractJwtSigningSecretKey } from "~/services/realtime/jwtAuth.server";
|
||
import { requireUserId } from "~/services/session.server";
|
||
import { cn } from "~/utils/cn";
|
||
import { EnvironmentParamSchema } from "~/utils/pathBuilder";
|
||
|
||
export const meta: MetaFunction = () => {
|
||
return [{ title: "Playground | Trigger.dev" }];
|
||
};
|
||
|
||
export const loader = async ({ request, params }: LoaderFunctionArgs) => {
|
||
const userId = await requireUserId(request);
|
||
const { organizationSlug, projectParam, envParam } = EnvironmentParamSchema.parse(params);
|
||
const agentSlug = params.agentParam;
|
||
|
||
if (!agentSlug) {
|
||
throw new Response(undefined, { status: 404, statusText: "Agent not specified" });
|
||
}
|
||
|
||
const project = await findProjectBySlug(organizationSlug, projectParam, userId);
|
||
if (!project) {
|
||
throw new Response(undefined, { status: 404, statusText: "Project not found" });
|
||
}
|
||
|
||
const environment = await findEnvironmentBySlug(project.id, envParam, userId);
|
||
if (!environment) {
|
||
throw new Response(undefined, { status: 404, statusText: "Environment not found" });
|
||
}
|
||
|
||
const agent = await playgroundPresenter.getAgent({
|
||
environmentId: environment.id,
|
||
environmentType: environment.type,
|
||
agentSlug,
|
||
});
|
||
|
||
if (!agent) {
|
||
throw new Response(undefined, { status: 404, statusText: "Agent not found" });
|
||
}
|
||
|
||
const agentConfig = agent.config as { type?: string } | null;
|
||
const apiOrigin = serverEnv.API_ORIGIN || serverEnv.LOGIN_ORIGIN || "http://localhost:3030";
|
||
|
||
const recentConversations = await playgroundPresenter.getRecentConversations({
|
||
environmentId: environment.id,
|
||
agentSlug,
|
||
userId,
|
||
});
|
||
|
||
// Check for ?conversation= param to resume an existing conversation
|
||
const url = new URL(request.url);
|
||
const conversationId = url.searchParams.get("conversation");
|
||
|
||
let activeConversation: {
|
||
chatId: string;
|
||
runFriendlyId: string | null;
|
||
publicAccessToken: string | null;
|
||
clientData: unknown;
|
||
messages: unknown;
|
||
lastEventId: string | null;
|
||
} | null = null;
|
||
|
||
if (conversationId) {
|
||
const conv = recentConversations.find((c) => c.id === conversationId);
|
||
if (conv) {
|
||
let jwt: string | null = null;
|
||
if (conv.isActive && conv.runFriendlyId) {
|
||
jwt = await internal_generateJWT({
|
||
secretKey: extractJwtSigningSecretKey(environment),
|
||
payload: {
|
||
sub: environment.id,
|
||
pub: true,
|
||
scopes: [`read:runs:${conv.runFriendlyId}`, `write:inputStreams:${conv.runFriendlyId}`],
|
||
},
|
||
expirationTime: "1h",
|
||
});
|
||
}
|
||
|
||
activeConversation = {
|
||
chatId: conv.chatId,
|
||
runFriendlyId: conv.runFriendlyId,
|
||
publicAccessToken: jwt,
|
||
clientData: conv.clientData,
|
||
messages: conv.messages,
|
||
lastEventId: conv.lastEventId,
|
||
};
|
||
}
|
||
}
|
||
|
||
return typedjson({
|
||
agent: {
|
||
slug: agent.slug,
|
||
filePath: agent.filePath,
|
||
type: agentConfig?.type ?? "unknown",
|
||
clientDataSchema: agent.payloadSchema ?? null,
|
||
},
|
||
apiOrigin,
|
||
recentConversations,
|
||
activeConversation,
|
||
});
|
||
};
|
||
|
||
export default function PlaygroundAgentPage() {
|
||
const { agent, activeConversation } = useTypedLoaderData<typeof loader>();
|
||
// Key on agent slug + conversation chatId so React remounts all stateful
|
||
// children when switching agents or navigating between conversations.
|
||
// Without the agent slug, switching agents keeps key="new" and React
|
||
// reuses the component — useState initializers don't re-run.
|
||
const conversationKey = `${agent.slug}:${activeConversation?.chatId ?? "new"}`;
|
||
return <PlaygroundChat key={conversationKey} />;
|
||
}
|
||
|
||
const PARENT_ROUTE_ID =
|
||
"routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.playground";
|
||
|
||
function PlaygroundChat() {
|
||
const { agent, apiOrigin, recentConversations, activeConversation } =
|
||
useTypedLoaderData<typeof loader>();
|
||
const parentData = useRouteLoaderData(PARENT_ROUTE_ID) as
|
||
| {
|
||
agents: Array<{ slug: string }>;
|
||
versions: string[];
|
||
regions: Array<{
|
||
id: string;
|
||
name: string;
|
||
description?: string;
|
||
isDefault: boolean;
|
||
}>;
|
||
isDev: boolean;
|
||
}
|
||
| undefined;
|
||
const versions = parentData?.versions ?? [];
|
||
const regions = parentData?.regions ?? [];
|
||
const isDev = parentData?.isDev ?? false;
|
||
const defaultRegion = regions.find((r) => r.isDefault);
|
||
const navigate = useNavigate();
|
||
const organization = useOrganization();
|
||
const project = useProject();
|
||
const environment = useEnvironment();
|
||
|
||
const [conversationId, setConversationId] = useState<string | null>(() =>
|
||
activeConversation
|
||
? (recentConversations.find((c) => c.chatId === activeConversation.chatId)?.id ?? null)
|
||
: null
|
||
);
|
||
const [chatId, _setChatId] = useState(() => activeConversation?.chatId ?? crypto.randomUUID());
|
||
const [clientDataJson, setClientDataJson] = useState(() =>
|
||
activeConversation?.clientData ? JSON.stringify(activeConversation.clientData, null, 2) : "{}"
|
||
);
|
||
const clientDataJsonRef = useRef(clientDataJson);
|
||
clientDataJsonRef.current = clientDataJson;
|
||
const [machine, setMachine] = useState<string | undefined>(undefined);
|
||
const [tags, setTags] = useState<string[]>([]);
|
||
const [maxAttempts, setMaxAttempts] = useState<number | undefined>(undefined);
|
||
const [maxDuration, setMaxDuration] = useState<number | undefined>(undefined);
|
||
const [version, setVersion] = useState<string | undefined>(undefined);
|
||
const [region, setRegion] = useState<string | undefined>(() =>
|
||
isDev ? undefined : defaultRegion?.name
|
||
);
|
||
|
||
const actionPath = `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/playground/action`;
|
||
|
||
// Server-side `start` via Remix action — atomically creates the
|
||
// backing Session for `chatId` and triggers the first run, returns
|
||
// the session-scoped PAT. Idempotent: called on initial use AND on
|
||
// 401, so the same code path serves both first-run and PAT renewal.
|
||
const startSession = useCallback(async (): Promise<string> => {
|
||
const formData = new FormData();
|
||
formData.set("intent", "start");
|
||
formData.set("agentSlug", agent.slug);
|
||
formData.set("chatId", chatId);
|
||
formData.set("clientData", clientDataJsonRef.current);
|
||
if (tags.length > 0) formData.set("tags", tags.join(","));
|
||
if (machine) formData.set("machine", machine);
|
||
if (maxAttempts) formData.set("maxAttempts", String(maxAttempts));
|
||
if (maxDuration) formData.set("maxDuration", String(maxDuration));
|
||
if (version) formData.set("version", version);
|
||
if (region) formData.set("region", region);
|
||
|
||
const response = await fetch(actionPath, { method: "POST", body: formData });
|
||
const data = (await response.json()) as {
|
||
runId?: string;
|
||
publicAccessToken?: string;
|
||
conversationId?: string;
|
||
error?: string;
|
||
};
|
||
|
||
if (!response.ok || !data.publicAccessToken) {
|
||
throw new Error(data.error ?? "Failed to start chat session");
|
||
}
|
||
|
||
if (data.conversationId) {
|
||
setConversationId(data.conversationId);
|
||
}
|
||
|
||
return data.publicAccessToken;
|
||
}, [actionPath, agent.slug, chatId, tags, machine, maxAttempts, maxDuration, version, region]);
|
||
|
||
// Same-origin resource routes: use the page origin, not apiOrigin, so in/append
|
||
// doesn't go cross-origin (CORS preflight) when API_ORIGIN != APP_ORIGIN.
|
||
const origin = typeof window !== "undefined" ? window.location.origin : apiOrigin;
|
||
const playgroundBaseURL = `${origin}/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/playground`;
|
||
|
||
// The transport is constructed once (guarded ref below); reading
|
||
// `startSession` directly there would freeze its closure to the
|
||
// first render's sidebar values, so subsequent edits to tags /
|
||
// machine / maxAttempts / maxDuration / version / region would be
|
||
// silently ignored on the first send. Mirror the `clientDataJsonRef`
|
||
// pattern so the transport always calls the latest `startSession`.
|
||
const startSessionRef = useRef(startSession);
|
||
startSessionRef.current = startSession;
|
||
|
||
// Create TriggerChatTransport directly (not via useTriggerChatTransport hook
|
||
// to avoid React version mismatch between SDK and webapp)
|
||
const transportRef = useRef<TriggerChatTransport | null>(null);
|
||
if (transportRef.current === null) {
|
||
transportRef.current = new TriggerChatTransport({
|
||
task: agent.slug,
|
||
// The Remix action is idempotent on `(env, externalId)` and
|
||
// returns a fresh session PAT every time, so it serves both
|
||
// first-run create and PAT renewal. `startSession` runs on
|
||
// `transport.preload(chatId)` and lazily on the first
|
||
// `sendMessage`; `accessToken` runs on a 401/403 from any
|
||
// session-PAT-authed request. Wiring the same call to both
|
||
// keeps the Preload button working without a separate refresh
|
||
// route.
|
||
startSession: async () => ({ publicAccessToken: await startSessionRef.current() }),
|
||
accessToken: () => startSessionRef.current(),
|
||
baseURL: playgroundBaseURL,
|
||
// Use safeParseJson so a mid-edit invalid JSON state in the editor
|
||
// doesn't throw and crash the component during transport construction.
|
||
clientData: safeParseJson(clientDataJson),
|
||
...(activeConversation?.publicAccessToken
|
||
? {
|
||
sessions: {
|
||
[activeConversation.chatId]: {
|
||
publicAccessToken: activeConversation.publicAccessToken,
|
||
lastEventId: activeConversation.lastEventId ?? undefined,
|
||
},
|
||
},
|
||
}
|
||
: {}),
|
||
});
|
||
}
|
||
const transport = transportRef.current;
|
||
|
||
// Keep the transport's `defaultMetadata` in sync with the JSON editor.
|
||
// Without this the transport uses the value captured at construction for
|
||
// every per-turn metadata merge, even after the user edits the JSON.
|
||
// `startSession` reads from `clientDataJsonRef.current` directly so session
|
||
// creation is unaffected — this only fixes the per-turn metadata path.
|
||
useEffect(() => {
|
||
// JSONEditor fires onChange on every keystroke — intermediate values
|
||
// like `{"key":` are syntactically invalid. `safeParseJson` returns
|
||
// `{}` on parse failure so the next valid keystroke lands the update
|
||
// without crashing the component mid-edit.
|
||
transport.setClientData(safeParseJson(clientDataJson));
|
||
}, [clientDataJson, transport]);
|
||
|
||
// Initial messages from persisted conversation (for resume)
|
||
const initialMessages = activeConversation?.messages
|
||
? (activeConversation.messages as UIMessage[])
|
||
: [];
|
||
|
||
// Track the initial message count so we only save after genuinely new turns
|
||
// (not during resume replay which re-fires onFinish for replayed turns)
|
||
const initialMessageCountRef = useRef(initialMessages?.length ?? 0);
|
||
|
||
// Save messages after each turn completes
|
||
const saveMessages = useCallback(
|
||
(allMessages: UIMessage[]) => {
|
||
// Skip saves during resume replay — only save when we have more messages than we started with
|
||
if (allMessages.length <= initialMessageCountRef.current) return;
|
||
|
||
const currentSession = transport.getSession(chatId);
|
||
const lastEventId = currentSession?.lastEventId;
|
||
|
||
const formData = new FormData();
|
||
formData.set("intent", "save");
|
||
formData.set("agentSlug", agent.slug);
|
||
formData.set("chatId", chatId);
|
||
formData.set("messages", JSON.stringify(allMessages));
|
||
if (lastEventId) formData.set("lastEventId", lastEventId);
|
||
|
||
// Fire and forget
|
||
fetch(actionPath, { method: "POST", body: formData }).catch(() => {});
|
||
|
||
// Update the baseline so subsequent saves work correctly
|
||
initialMessageCountRef.current = allMessages.length;
|
||
},
|
||
[chatId, agent.slug, actionPath, transport]
|
||
);
|
||
|
||
// useChat from AI SDK — handles message accumulation, streaming, stop
|
||
const { messages, sendMessage, stop, status, error } = useChat({
|
||
id: chatId,
|
||
messages: initialMessages,
|
||
transport,
|
||
onFinish: ({ messages: allMessages }) => {
|
||
saveMessages(allMessages);
|
||
},
|
||
});
|
||
|
||
const isStreaming = status === "streaming";
|
||
const isSubmitted = status === "submitted";
|
||
|
||
// Sticky-bottom auto-scroll for the messages list. The hook walks up to
|
||
// the surrounding `overflow-y-auto` panel and follows the conversation
|
||
// as new chunks stream in — pauses if you scroll up to read history,
|
||
// resumes when you scroll back into the bottom band. Same behavior as
|
||
// the run-inspector Agent tab.
|
||
const messagesRootRef = useAutoScrollToBottom([messages, isSubmitted]);
|
||
|
||
// Pending messages — steering during streaming
|
||
const pending = usePlaygroundPendingMessages({
|
||
transport,
|
||
chatId,
|
||
status,
|
||
messages,
|
||
sendMessage,
|
||
metadata: safeParseJson(clientDataJson),
|
||
});
|
||
|
||
const [input, setInput] = useState("");
|
||
const [preloading, setPreloading] = useState(false);
|
||
const [preloaded, setPreloaded] = useState(false);
|
||
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||
|
||
// Focus on mount; refocus when the state-1 ↔ state-2 transition remounts the textarea.
|
||
const isEmpty = messages.length === 0;
|
||
useEffect(() => {
|
||
inputRef.current?.focus();
|
||
}, [isEmpty]);
|
||
|
||
const session = transport.getSession(chatId);
|
||
|
||
const handlePreload = useCallback(async () => {
|
||
setPreloading(true);
|
||
try {
|
||
await transport.preload(chatId);
|
||
setPreloaded(true);
|
||
inputRef.current?.focus();
|
||
} finally {
|
||
setPreloading(false);
|
||
}
|
||
}, [transport, chatId]);
|
||
|
||
const handleNewConversation = useCallback(() => {
|
||
// Navigate without ?conversation= so the loader returns activeConversation=null
|
||
// and the key changes to "new", causing a full remount with fresh state.
|
||
navigate(window.location.pathname);
|
||
}, [navigate]);
|
||
|
||
const handleDeleteConversation = useCallback(async () => {
|
||
if (!conversationId) return;
|
||
|
||
const formData = new FormData();
|
||
formData.set("intent", "delete");
|
||
formData.set("agentSlug", agent.slug);
|
||
formData.set("deleteConversationId", conversationId);
|
||
|
||
await fetch(actionPath, { method: "POST", body: formData });
|
||
handleNewConversation();
|
||
}, [conversationId, agent.slug, actionPath, handleNewConversation]);
|
||
|
||
const handleSend = useCallback(() => {
|
||
const trimmed = input.trim();
|
||
if (!trimmed) return;
|
||
|
||
setInput("");
|
||
// steer() handles both cases: sends via input stream during streaming,
|
||
// or sends as a normal message when ready
|
||
pending.steer(trimmed);
|
||
// Keep focus after the state-1 → state-2 remount completes.
|
||
requestAnimationFrame(() => inputRef.current?.focus());
|
||
}, [input, pending]);
|
||
|
||
const handleKeyDown = useCallback(
|
||
(e: React.KeyboardEvent) => {
|
||
if (e.key === "Enter" && !e.shiftKey) {
|
||
e.preventDefault();
|
||
handleSend();
|
||
}
|
||
},
|
||
[handleSend]
|
||
);
|
||
|
||
return (
|
||
<ResizablePanelGroup orientation="horizontal" className="h-full">
|
||
<ResizablePanel id="playground-chat" min="300px">
|
||
<div className="relative flex h-full flex-col">
|
||
{/* Header — floats over the scroll area so messages can scroll behind it */}
|
||
<div className="pointer-events-none absolute inset-x-0 top-0 z-10 flex items-center justify-end px-2 py-2">
|
||
<div className="pointer-events-auto">
|
||
<ConversationMenu
|
||
runFriendlyId={activeConversation?.runFriendlyId ?? null}
|
||
hasMessages={messages.length > 0}
|
||
hasConversation={conversationId !== null}
|
||
messages={messages}
|
||
onDeleteConversation={handleDeleteConversation}
|
||
onNewConversation={handleNewConversation}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Scroll container is always mounted — useAutoScrollToBottom caches
|
||
its container on mount and won't refind it across remounts. */}
|
||
<div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
|
||
<div
|
||
ref={messagesRootRef}
|
||
className={cn(
|
||
"min-h-full",
|
||
messages.length === 0
|
||
? "flex items-center justify-center px-4 pb-[20vh] pt-8"
|
||
: "mx-auto w-full max-w-3xl space-y-4 px-4 pb-4 pt-12"
|
||
)}
|
||
>
|
||
{messages.length === 0 ? (
|
||
<div className="w-full max-w-2xl">
|
||
<h2 className="mb-6 text-center font-sans text-xl font-semibold leading-7 tracking-tight text-text-dimmed">
|
||
Type a message to start testing{" "}
|
||
<span className="inline-flex items-center gap-1.5 align-middle">
|
||
<CubeSparkleIcon className="size-6 text-agents" />
|
||
<code className="text-text-bright">{agent.slug}</code>
|
||
</span>
|
||
</h2>
|
||
<ChatComposer
|
||
inputRef={inputRef}
|
||
value={input}
|
||
onChange={setInput}
|
||
onKeyDown={handleKeyDown}
|
||
placeholder="Type a message…"
|
||
minHeightClassName="min-h-[80px]"
|
||
maxHeightClassName="max-h-[60vh]"
|
||
footer={
|
||
<>
|
||
<span className="text-[11px] text-text-dimmed">
|
||
Press Enter to send, Shift+Enter for new line
|
||
</span>
|
||
<PreloadButton
|
||
preloading={preloading}
|
||
preloaded={preloaded}
|
||
onPreload={handlePreload}
|
||
/>
|
||
</>
|
||
}
|
||
/>
|
||
</div>
|
||
) : (
|
||
<>
|
||
{messages.map((msg) => (
|
||
<MessageBubble key={msg.id} message={msg} />
|
||
))}
|
||
{isSubmitted && (
|
||
<div className="flex justify-start">
|
||
<div className="flex items-center gap-2 rounded-lg bg-background-hover px-4 py-2.5">
|
||
<Spinner className="size-3" />
|
||
<span className="text-sm text-text-dimmed">Thinking…</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Error */}
|
||
{error && messages.length > 0 && (
|
||
<div className="mx-4 mb-2 flex items-start gap-2 rounded border border-error/30 bg-error/10 px-3 py-2">
|
||
<span className="flex-1 text-xs text-error">{error.message}</span>
|
||
</div>
|
||
)}
|
||
|
||
{messages.length > 0 && (
|
||
<div className="px-4 pb-8">
|
||
<div className="mx-auto max-w-3xl">
|
||
<ChatComposer
|
||
inputRef={inputRef}
|
||
value={input}
|
||
onChange={setInput}
|
||
onKeyDown={handleKeyDown}
|
||
placeholder={isStreaming ? "Send a steering message…" : "Type a message…"}
|
||
minHeightClassName="min-h-[44px]"
|
||
maxHeightClassName="max-h-[40vh]"
|
||
trailing={
|
||
isStreaming ? (
|
||
<Button variant="danger/small" LeadingIcon={StopIcon} onClick={stop}>
|
||
Stop
|
||
</Button>
|
||
) : undefined
|
||
}
|
||
footer={
|
||
<span className="text-[11px] text-text-dimmed">
|
||
Press Enter to send, Shift+Enter for new line
|
||
</span>
|
||
}
|
||
/>
|
||
{pending.pending.length > 0 && (
|
||
<div className="mt-1.5 space-y-1">
|
||
{pending.pending.map((msg) => (
|
||
<div key={msg.id} className="flex items-center gap-2 text-[10px]">
|
||
<span
|
||
className={cn(
|
||
"rounded px-1.5 py-0.5",
|
||
msg.mode === "steering"
|
||
? "bg-amber-500/10 text-amber-400"
|
||
: "bg-background-raised text-text-dimmed"
|
||
)}
|
||
>
|
||
{msg.mode === "steering" ? "Steering" : "Queued"}
|
||
</span>
|
||
<span className="truncate text-text-dimmed">{msg.text}</span>
|
||
{msg.injected && <span className="text-success">Injected</span>}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
{isStreaming && (
|
||
<div className="mt-1.5 text-[10px] text-text-dimmed">
|
||
Send a steering message to guide the agent between tool calls
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</ResizablePanel>
|
||
<ResizableHandle id="playground-sidebar-handle" />
|
||
<ResizablePanel id="playground-sidebar" default="420px" min="360px" max="720px">
|
||
<PlaygroundSidebar
|
||
clientDataJson={clientDataJson}
|
||
onClientDataChange={setClientDataJson}
|
||
getCurrentClientData={() => clientDataJsonRef.current}
|
||
clientDataSchema={agent.clientDataSchema}
|
||
agentSlug={agent.slug}
|
||
machine={machine}
|
||
onMachineChange={setMachine}
|
||
tags={tags}
|
||
onTagsChange={setTags}
|
||
maxAttempts={maxAttempts}
|
||
onMaxAttemptsChange={setMaxAttempts}
|
||
maxDuration={maxDuration}
|
||
onMaxDurationChange={setMaxDuration}
|
||
version={version}
|
||
onVersionChange={setVersion}
|
||
versions={versions}
|
||
region={region}
|
||
onRegionChange={setRegion}
|
||
regions={regions}
|
||
isDev={isDev}
|
||
session={session}
|
||
runFriendlyId={activeConversation?.runFriendlyId ?? undefined}
|
||
messageCount={messages.length}
|
||
isStreaming={isStreaming}
|
||
status={status}
|
||
recentConversations={recentConversations}
|
||
currentConversationId={conversationId}
|
||
actionPath={actionPath}
|
||
/>
|
||
</ResizablePanel>
|
||
</ResizablePanelGroup>
|
||
);
|
||
}
|
||
|
||
// Message rendering — `MessageBubble` is imported from
|
||
// `~/components/runs/v3/agent/AgentMessageView`. The same module is used by
|
||
// the run details Agent view so both surfaces stay in sync.
|
||
|
||
function ChatComposer({
|
||
inputRef,
|
||
value,
|
||
onChange,
|
||
onKeyDown,
|
||
placeholder,
|
||
minHeightClassName,
|
||
maxHeightClassName,
|
||
trailing,
|
||
footer,
|
||
}: {
|
||
inputRef: React.RefObject<HTMLTextAreaElement>;
|
||
value: string;
|
||
onChange: (val: string) => void;
|
||
onKeyDown: (e: React.KeyboardEvent) => void;
|
||
placeholder: string;
|
||
minHeightClassName: string;
|
||
maxHeightClassName: string;
|
||
trailing?: React.ReactNode;
|
||
footer?: React.ReactNode;
|
||
}) {
|
||
return (
|
||
<div className="rounded-2xl border border-border-bright bg-background-bright p-2 transition focus-within:border-border-brighter">
|
||
<div className="flex items-end gap-2">
|
||
<textarea
|
||
ref={inputRef}
|
||
value={value}
|
||
onChange={(e) => onChange(e.target.value)}
|
||
onKeyDown={onKeyDown}
|
||
placeholder={placeholder}
|
||
className={cn(
|
||
"scrollbar-gutter-stable flex-1 resize-none border-0 bg-transparent px-2 py-1.5 text-sm text-text-bright placeholder-text-dimmed outline-hidden ring-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control field-sizing-content focus:border-0 focus:outline-hidden focus:ring-0",
|
||
minHeightClassName,
|
||
maxHeightClassName
|
||
)}
|
||
/>
|
||
{trailing}
|
||
</div>
|
||
{footer && (
|
||
<div className="mt-1 flex items-center justify-between gap-2 px-2 pb-1">{footer}</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function PreloadButton({
|
||
preloading,
|
||
preloaded,
|
||
onPreload,
|
||
}: {
|
||
preloading: boolean;
|
||
preloaded: boolean;
|
||
onPreload: () => void;
|
||
}) {
|
||
const tooltip = preloaded
|
||
? "The agent is warmed up and waiting."
|
||
: "Pre-starts the agent to eliminate the cold-start delay on your first message.";
|
||
|
||
// Wrap in a span so hover fires even when the inner button is disabled —
|
||
// disabled buttons don't receive pointer events on their own.
|
||
return (
|
||
<SimpleTooltip
|
||
asChild
|
||
side="top"
|
||
className="max-w-[240px]"
|
||
content={tooltip}
|
||
button={
|
||
<span className="inline-flex">
|
||
<Button
|
||
variant="tertiary/small"
|
||
LeadingIcon={preloading ? Spinner : preloaded ? CheckIcon : BoltIcon}
|
||
leadingIconClassName={preloaded ? "text-success" : undefined}
|
||
onClick={onPreload}
|
||
disabled={preloading || preloaded}
|
||
>
|
||
{preloaded ? "Preloaded" : preloading ? "Preloading…" : "Preload"}
|
||
</Button>
|
||
</span>
|
||
}
|
||
/>
|
||
);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Sidebar
|
||
// ---------------------------------------------------------------------------
|
||
|
||
const machinePresets = Object.values(MachinePresetName.enum);
|
||
|
||
function PlaygroundSidebar({
|
||
clientDataJson,
|
||
onClientDataChange,
|
||
getCurrentClientData,
|
||
clientDataSchema,
|
||
agentSlug,
|
||
machine,
|
||
onMachineChange,
|
||
tags,
|
||
onTagsChange,
|
||
maxAttempts,
|
||
onMaxAttemptsChange,
|
||
maxDuration,
|
||
onMaxDurationChange,
|
||
version,
|
||
onVersionChange,
|
||
versions,
|
||
region,
|
||
onRegionChange,
|
||
regions,
|
||
isDev,
|
||
session,
|
||
runFriendlyId,
|
||
messageCount,
|
||
isStreaming,
|
||
status,
|
||
recentConversations,
|
||
currentConversationId,
|
||
actionPath,
|
||
}: {
|
||
clientDataJson: string;
|
||
onClientDataChange: (val: string) => void;
|
||
getCurrentClientData: () => string;
|
||
clientDataSchema: unknown;
|
||
agentSlug: string;
|
||
machine: string | undefined;
|
||
onMachineChange: (val: string | undefined) => void;
|
||
tags: string[];
|
||
onTagsChange: (val: string[]) => void;
|
||
maxAttempts: number | undefined;
|
||
onMaxAttemptsChange: (val: number | undefined) => void;
|
||
maxDuration: number | undefined;
|
||
onMaxDurationChange: (val: number | undefined) => void;
|
||
version: string | undefined;
|
||
onVersionChange: (val: string | undefined) => void;
|
||
versions: string[];
|
||
region: string | undefined;
|
||
onRegionChange: (val: string | undefined) => void;
|
||
regions: Array<{ id: string; name: string; description?: string; isDefault: boolean }>;
|
||
isDev: boolean;
|
||
session:
|
||
| {
|
||
publicAccessToken: string;
|
||
lastEventId?: string;
|
||
isStreaming?: boolean;
|
||
}
|
||
| undefined;
|
||
/**
|
||
* Friendly id of the latest run for this conversation (drawn from the
|
||
* playground's own `playgroundConversation` table, which mirrors the
|
||
* Session's `currentRunId`). Optional because a conversation may
|
||
* exist briefly before the first run lands.
|
||
*/
|
||
runFriendlyId: string | undefined;
|
||
messageCount: number;
|
||
isStreaming: boolean;
|
||
status: string;
|
||
recentConversations: PlaygroundConversation[];
|
||
currentConversationId: string | null;
|
||
actionPath: string;
|
||
}) {
|
||
const regionItems = regions.map((r) => ({
|
||
value: r.name,
|
||
label: r.description ? `${r.name} — ${r.description}` : r.name,
|
||
}));
|
||
return (
|
||
<div className="flex h-full flex-col">
|
||
<ClientTabs
|
||
defaultValue="clientData"
|
||
className="flex h-full min-h-0 flex-col overflow-hidden pt-1"
|
||
>
|
||
<div className="h-fit overflow-x-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
|
||
<ClientTabsList variant="underline" className="mx-3 shrink-0">
|
||
<ClientTabsTrigger
|
||
value="clientData"
|
||
variant="underline"
|
||
layoutId="playground-sidebar-tabs"
|
||
className="shrink-0"
|
||
>
|
||
Client Data
|
||
</ClientTabsTrigger>
|
||
<ClientTabsTrigger
|
||
value="options"
|
||
variant="underline"
|
||
layoutId="playground-sidebar-tabs"
|
||
className="shrink-0"
|
||
>
|
||
Options
|
||
</ClientTabsTrigger>
|
||
<ClientTabsTrigger
|
||
value="session"
|
||
variant="underline"
|
||
layoutId="playground-sidebar-tabs"
|
||
className="shrink-0"
|
||
>
|
||
Session
|
||
</ClientTabsTrigger>
|
||
<ClientTabsTrigger
|
||
value="history"
|
||
variant="underline"
|
||
layoutId="playground-sidebar-tabs"
|
||
className="shrink-0"
|
||
>
|
||
History
|
||
</ClientTabsTrigger>
|
||
</ClientTabsList>
|
||
</div>
|
||
|
||
{/* Client Data tab */}
|
||
<ClientTabsContent
|
||
value="clientData"
|
||
className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
|
||
>
|
||
<div className="min-w-64 space-y-4 p-3">
|
||
<div className="space-y-2">
|
||
<div className="space-y-0.5">
|
||
<Header3 className="text-text-bright">Custom metadata</Header3>
|
||
<Paragraph variant="extra-small" className="text-text-dimmed">
|
||
Sent with each conversation turn.
|
||
</Paragraph>
|
||
</div>
|
||
<div className="overflow-hidden rounded border border-border-bright">
|
||
<JSONEditor
|
||
defaultValue={clientDataJson}
|
||
readOnly={false}
|
||
onChange={onClientDataChange}
|
||
minHeight="120px"
|
||
maxHeight="300px"
|
||
showClearButton={false}
|
||
showCopyButton={false}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<AIPayloadTabContent
|
||
onPayloadGenerated={onClientDataChange}
|
||
payloadSchema={clientDataSchema ?? undefined}
|
||
taskIdentifier={agentSlug}
|
||
getCurrentPayload={getCurrentClientData}
|
||
generateButtonLabel="Generate client data"
|
||
placeholder="Prompt to generate client data using AI…"
|
||
isAgent={true}
|
||
showExamplePromptsHeader={false}
|
||
examplePromptsOverride={[
|
||
"Generate valid client data",
|
||
"Generate client data with all fields",
|
||
"Generate client data with edge cases",
|
||
]}
|
||
/>
|
||
|
||
{clientDataSchema != null && (
|
||
<SchemaTabContent
|
||
schema={clientDataSchema}
|
||
title="Schema"
|
||
description="JSON Schema for the agent's client data."
|
||
showDocsLink={false}
|
||
/>
|
||
)}
|
||
</div>
|
||
</ClientTabsContent>
|
||
|
||
{/* Options tab */}
|
||
<ClientTabsContent
|
||
value="options"
|
||
className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
|
||
>
|
||
<div className="space-y-4 p-3">
|
||
<InputGroup fullWidth>
|
||
<Label variant="small" required={false}>
|
||
Machine
|
||
</Label>
|
||
<Select
|
||
value={machine ?? ""}
|
||
setValue={(val) =>
|
||
onMachineChange(val && typeof val === "string" ? val : undefined)
|
||
}
|
||
placeholder="Default"
|
||
variant="tertiary/small"
|
||
items={machinePresets}
|
||
filter={(item, search) => item.toLowerCase().includes(search.toLowerCase())}
|
||
>
|
||
{(matches) =>
|
||
matches.map((preset) => (
|
||
<SelectItem key={preset} value={preset}>
|
||
{preset}
|
||
</SelectItem>
|
||
))
|
||
}
|
||
</Select>
|
||
<Hint>Overrides the machine preset.</Hint>
|
||
</InputGroup>
|
||
|
||
<InputGroup fullWidth>
|
||
<Label variant="small" required={false}>
|
||
Tags
|
||
</Label>
|
||
<RunTagInput
|
||
tags={tags}
|
||
onTagsChange={onTagsChange}
|
||
variant="small"
|
||
maxTags={3}
|
||
placeholder="Add tag…"
|
||
/>
|
||
<Hint>Add tags to easily filter runs. 3 max (2 added automatically).</Hint>
|
||
</InputGroup>
|
||
|
||
<InputGroup fullWidth>
|
||
<Label variant="small" required={false}>
|
||
Max attempts
|
||
</Label>
|
||
<Input
|
||
type="number"
|
||
variant="small"
|
||
min={1}
|
||
placeholder="Default"
|
||
value={maxAttempts ?? ""}
|
||
onChange={(e) => {
|
||
const val = e.target.value;
|
||
onMaxAttemptsChange(val ? parseInt(val, 10) : undefined);
|
||
}}
|
||
/>
|
||
<Hint>Retries failed runs up to the specified number of attempts.</Hint>
|
||
</InputGroup>
|
||
|
||
<InputGroup fullWidth>
|
||
<Label variant="small" required={false}>
|
||
Max duration
|
||
</Label>
|
||
<DurationPicker value={maxDuration} onChange={onMaxDurationChange} variant="small" />
|
||
<Hint>Overrides the maximum compute time limit for the run.</Hint>
|
||
</InputGroup>
|
||
|
||
{versions.length > 0 && (
|
||
<InputGroup fullWidth>
|
||
<Label variant="small" required={false}>
|
||
Version
|
||
</Label>
|
||
<Select
|
||
value={version ?? ""}
|
||
setValue={(val) =>
|
||
onVersionChange(val && typeof val === "string" ? val : undefined)
|
||
}
|
||
placeholder="Latest"
|
||
variant="tertiary/small"
|
||
disabled={isDev}
|
||
items={versions}
|
||
filter={(item, search) => item.toLowerCase().includes(search.toLowerCase())}
|
||
>
|
||
{(matches) =>
|
||
matches.map((v, i) => (
|
||
<SelectItem key={v} value={v}>
|
||
{i === 0 ? `${v} (latest)` : v}
|
||
</SelectItem>
|
||
))
|
||
}
|
||
</Select>
|
||
<Hint>
|
||
{isDev
|
||
? "Version is determined by the running dev server."
|
||
: "Lock the run to a specific deployed version."}
|
||
</Hint>
|
||
</InputGroup>
|
||
)}
|
||
|
||
{regionItems.length > 1 && (
|
||
<InputGroup fullWidth>
|
||
<Label variant="small" required={false}>
|
||
Region
|
||
</Label>
|
||
<Select
|
||
value={region ?? ""}
|
||
setValue={(val) =>
|
||
onRegionChange(val && typeof val === "string" ? val : undefined)
|
||
}
|
||
text={(val) => val || undefined}
|
||
placeholder={isDev ? "–" : "Default"}
|
||
variant="tertiary/small"
|
||
disabled={isDev}
|
||
items={regionItems}
|
||
filter={(item, search) => item.label.toLowerCase().includes(search.toLowerCase())}
|
||
>
|
||
{(matches) =>
|
||
matches.map((r) => (
|
||
<SelectItem key={r.value} value={r.value}>
|
||
{r.label}
|
||
</SelectItem>
|
||
))
|
||
}
|
||
</Select>
|
||
<Hint>
|
||
{isDev
|
||
? "Region is not applicable in development."
|
||
: "Run the agent in a specific region."}
|
||
</Hint>
|
||
</InputGroup>
|
||
)}
|
||
</div>
|
||
</ClientTabsContent>
|
||
|
||
{/* Session tab */}
|
||
<ClientTabsContent
|
||
value="session"
|
||
className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
|
||
>
|
||
<div className="min-w-64 space-y-3 p-3">
|
||
{session ? (
|
||
<>
|
||
{runFriendlyId && <SessionField label="Run ID" value={runFriendlyId} />}
|
||
<SessionField label="Messages" value={String(messageCount)} />
|
||
<div>
|
||
<label className="mb-0.5 block text-[10px] font-medium uppercase tracking-wider text-text-dimmed">
|
||
Status
|
||
</label>
|
||
<span className="flex items-center gap-1.5 text-xs">
|
||
<span
|
||
className={cn(
|
||
"size-1.5 rounded-full",
|
||
isStreaming ? "animate-pulse bg-success" : "bg-blue-500"
|
||
)}
|
||
/>
|
||
<span className="capitalize text-text-bright">{status}</span>
|
||
</span>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<p className="text-xs text-text-dimmed">
|
||
No active session. Send a message to start a conversation.
|
||
</p>
|
||
)}
|
||
</div>
|
||
</ClientTabsContent>
|
||
|
||
{/* History tab */}
|
||
<ClientTabsContent
|
||
value="history"
|
||
className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
|
||
>
|
||
<HistoryTabContent
|
||
conversations={recentConversations}
|
||
currentConversationId={currentConversationId}
|
||
actionPath={actionPath}
|
||
/>
|
||
</ClientTabsContent>
|
||
</ClientTabs>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Pending messages hook (reimplemented to avoid React version mismatch)
|
||
// ---------------------------------------------------------------------------
|
||
|
||
const PENDING_MESSAGE_INJECTED_TYPE = "data-pending-message-injected";
|
||
|
||
type PendingMessageEntry = {
|
||
id: string;
|
||
text: string;
|
||
mode: "steering" | "queued";
|
||
injected: boolean;
|
||
};
|
||
|
||
function usePlaygroundPendingMessages({
|
||
transport,
|
||
chatId,
|
||
status,
|
||
messages,
|
||
sendMessage,
|
||
metadata,
|
||
}: {
|
||
transport: TriggerChatTransport;
|
||
chatId: string;
|
||
status: string;
|
||
messages: UIMessage[];
|
||
sendMessage: (msg: { text: string }, opts?: { metadata?: Record<string, unknown> }) => void;
|
||
metadata?: Record<string, unknown>;
|
||
}) {
|
||
type InternalMsg = {
|
||
id: string;
|
||
role: "user";
|
||
parts: { type: "text"; text: string }[];
|
||
_mode: "steering" | "queued";
|
||
};
|
||
const [pendingMsgs, setPendingMsgs] = useState<InternalMsg[]>([]);
|
||
const injectedIdsRef = useRef<Set<string>>(new Set());
|
||
const prevStatusRef = useRef(status);
|
||
|
||
// Watch for injection confirmation chunks
|
||
useEffect(() => {
|
||
if (status !== "streaming") return;
|
||
let newlyInjected = false;
|
||
for (const msg of messages) {
|
||
if (msg.role !== "assistant") continue;
|
||
for (const part of msg.parts ?? []) {
|
||
if ((part as any).type === PENDING_MESSAGE_INJECTED_TYPE) {
|
||
const messageIds = (part as any).data?.messageIds as string[] | undefined;
|
||
if (Array.isArray(messageIds)) {
|
||
for (const id of messageIds) {
|
||
if (!injectedIdsRef.current.has(id)) {
|
||
injectedIdsRef.current.add(id);
|
||
newlyInjected = true;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
if (newlyInjected) {
|
||
setPendingMsgs((prev) => prev.filter((m) => !injectedIdsRef.current.has(m.id)));
|
||
}
|
||
}, [status, messages]);
|
||
|
||
// Handle turn completion — auto-send non-injected messages as next turn
|
||
useEffect(() => {
|
||
const turnCompleted = prevStatusRef.current === "streaming" && status === "ready";
|
||
prevStatusRef.current = status;
|
||
if (!turnCompleted) return;
|
||
|
||
const toSend = pendingMsgs.filter((m) => !injectedIdsRef.current.has(m.id));
|
||
setPendingMsgs([]);
|
||
injectedIdsRef.current.clear();
|
||
|
||
if (toSend.length > 0) {
|
||
const text = toSend.map((m) => m.parts[0]?.text ?? "").join("\n");
|
||
sendMessage({ text }, metadata ? { metadata } : undefined);
|
||
}
|
||
}, [status, pendingMsgs, sendMessage, metadata, messages]);
|
||
|
||
const steer = useCallback(
|
||
(text: string) => {
|
||
if (status === "streaming") {
|
||
const msg: InternalMsg = {
|
||
id: crypto.randomUUID(),
|
||
role: "user",
|
||
parts: [{ type: "text", text }],
|
||
_mode: "steering",
|
||
};
|
||
transport.sendPendingMessage(chatId, msg as any, metadata);
|
||
setPendingMsgs((prev) => [...prev, msg]);
|
||
} else {
|
||
sendMessage({ text }, metadata ? { metadata } : undefined);
|
||
}
|
||
},
|
||
[status, transport, chatId, sendMessage, metadata]
|
||
);
|
||
|
||
const pending: PendingMessageEntry[] = pendingMsgs.map((m) => ({
|
||
id: m.id,
|
||
text: m.parts[0]?.text ?? "",
|
||
mode: m._mode,
|
||
injected: injectedIdsRef.current.has(m.id),
|
||
}));
|
||
|
||
return { pending, steer };
|
||
}
|
||
|
||
function ConversationMenu({
|
||
runFriendlyId,
|
||
hasMessages,
|
||
hasConversation,
|
||
messages,
|
||
onDeleteConversation,
|
||
onNewConversation,
|
||
}: {
|
||
runFriendlyId: string | null;
|
||
hasMessages: boolean;
|
||
hasConversation: boolean;
|
||
messages: UIMessage[];
|
||
onDeleteConversation: () => void;
|
||
onNewConversation: () => void;
|
||
}) {
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
|
||
const handleCopyRaw = useCallback(() => {
|
||
void navigator.clipboard.writeText(JSON.stringify(messages, null, 2));
|
||
setIsOpen(false);
|
||
}, [messages]);
|
||
|
||
const wrap = useCallback(
|
||
(fn: () => void) => () => {
|
||
setIsOpen(false);
|
||
fn();
|
||
},
|
||
[]
|
||
);
|
||
|
||
return (
|
||
<Popover open={isOpen} onOpenChange={setIsOpen}>
|
||
<PopoverVerticalEllipseTrigger variant="minimal" />
|
||
<PopoverContent className="w-fit min-w-48 p-1" align="end">
|
||
<div className="flex flex-col gap-1">
|
||
<PopoverMenuItem
|
||
icon={PlusIcon}
|
||
leadingIconClassName="text-green-500 -mx-0.5"
|
||
title="New conversation"
|
||
onClick={wrap(onNewConversation)}
|
||
/>
|
||
{runFriendlyId && (
|
||
<PopoverMenuItem
|
||
to={`/runs/${runFriendlyId}`}
|
||
icon={RunsIcon}
|
||
leadingIconClassName="text-runs -mx-0.5"
|
||
title="View runs"
|
||
onClick={() => setIsOpen(false)}
|
||
/>
|
||
)}
|
||
{hasMessages && (
|
||
<PopoverMenuItem
|
||
icon={ClipboardIcon}
|
||
leadingIconClassName="text-yellow-500"
|
||
title="Copy raw"
|
||
onClick={handleCopyRaw}
|
||
/>
|
||
)}
|
||
{hasConversation && (
|
||
<PopoverMenuItem
|
||
icon={TrashIcon}
|
||
leadingIconClassName="text-error"
|
||
title="Delete conversation"
|
||
danger
|
||
onClick={wrap(onDeleteConversation)}
|
||
/>
|
||
)}
|
||
</div>
|
||
</PopoverContent>
|
||
</Popover>
|
||
);
|
||
}
|
||
|
||
function HistoryTabContent({
|
||
conversations,
|
||
currentConversationId,
|
||
actionPath,
|
||
}: {
|
||
conversations: PlaygroundConversation[];
|
||
currentConversationId: string | null;
|
||
actionPath: string;
|
||
}) {
|
||
const fetcher = useFetcher();
|
||
const navigate = useNavigate();
|
||
|
||
const deletingId =
|
||
fetcher.state !== "idle" ? (fetcher.formData?.get("deleteConversationId") as string) : null;
|
||
|
||
const handleDelete = useCallback(
|
||
(e: React.MouseEvent, conv: PlaygroundConversation) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
fetcher.submit(
|
||
{
|
||
intent: "delete",
|
||
agentSlug: conv.agentSlug,
|
||
deleteConversationId: conv.id,
|
||
},
|
||
{ method: "POST", action: actionPath }
|
||
);
|
||
|
||
// Deleted the active conv → clear ?conversation= so chat resets.
|
||
if (conv.id === currentConversationId) {
|
||
navigate(window.location.pathname);
|
||
}
|
||
},
|
||
[actionPath, currentConversationId, fetcher, navigate]
|
||
);
|
||
|
||
if (conversations.length === 0) {
|
||
return (
|
||
<div className="p-3">
|
||
<p className="text-xs text-text-dimmed">
|
||
No previous conversations yet. Send a message to start one.
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<ol className="space-y-0.5 p-2">
|
||
{conversations.map((conv, index) => {
|
||
const isActive = conv.id === currentConversationId;
|
||
return (
|
||
<li key={conv.id}>
|
||
<div
|
||
className={cn(
|
||
"group flex items-start gap-2 rounded-sm px-2 py-1.5 transition-colors hover:bg-background-bright",
|
||
isActive && "bg-background-hover hover:bg-background-hover",
|
||
deletingId === conv.id && "pointer-events-none opacity-50"
|
||
)}
|
||
>
|
||
<span className="w-5 shrink-0 text-right text-sm font-medium tabular-nums text-text-dimmed">
|
||
{index + 1}
|
||
</span>
|
||
<Link
|
||
to={`?conversation=${conv.id}`}
|
||
className="flex min-w-0 flex-1 flex-col items-start gap-0.5 outline-hidden focus-custom"
|
||
>
|
||
<Paragraph variant="small/bright" className="line-clamp-1 text-left">
|
||
{conv.title}
|
||
</Paragraph>
|
||
<div className="text-xs text-text-dimmed">
|
||
<DateTime date={conv.updatedAt} showTooltip={false} />
|
||
</div>
|
||
</Link>
|
||
<button
|
||
type="button"
|
||
onClick={(e) => handleDelete(e, conv)}
|
||
aria-label="Delete conversation"
|
||
className="shrink-0 rounded p-1 text-text-dimmed opacity-0 transition-opacity group-hover:opacity-100 hover:text-error"
|
||
>
|
||
<TrashIcon className="size-3.5" />
|
||
</button>
|
||
</div>
|
||
</li>
|
||
);
|
||
})}
|
||
</ol>
|
||
);
|
||
}
|
||
|
||
function safeParseJson(json: string): Record<string, unknown> {
|
||
try {
|
||
return JSON.parse(json || "{}") as Record<string, unknown>;
|
||
} catch {
|
||
return {};
|
||
}
|
||
}
|
||
|
||
function SessionField({ label, value }: { label: string; value: string }) {
|
||
return (
|
||
<div>
|
||
<label className="mb-0.5 block text-[10px] font-medium uppercase tracking-wider text-text-dimmed">
|
||
{label}
|
||
</label>
|
||
<code className="block truncate text-xs text-text-bright">{value}</code>
|
||
</div>
|
||
);
|
||
}
|