fix: align assistant ui presentation chat
This commit is contained in:
@@ -7,7 +7,10 @@ export type WorkflowToolName =
|
||||
export type PresentationToolName =
|
||||
| "selectWorkflowNode"
|
||||
| "focusOperation"
|
||||
| "showTraceFrame";
|
||||
| "showTraceFrame"
|
||||
| "fetchData"
|
||||
| "transformPayload"
|
||||
| "writeOutput";
|
||||
|
||||
export type AgentToolName = WorkflowToolName | PresentationToolName;
|
||||
|
||||
@@ -53,6 +56,21 @@ export const AGENT_TOOLS = {
|
||||
kind: "presentation",
|
||||
description: "Focus a trace frame in the presentation.",
|
||||
},
|
||||
fetchData: {
|
||||
name: "fetchData",
|
||||
kind: "presentation",
|
||||
description: "Presentation-only placeholder for fetching data in a one-off tool loop.",
|
||||
},
|
||||
transformPayload: {
|
||||
name: "transformPayload",
|
||||
kind: "presentation",
|
||||
description: "Presentation-only placeholder for transforming data in a one-off tool loop.",
|
||||
},
|
||||
writeOutput: {
|
||||
name: "writeOutput",
|
||||
kind: "presentation",
|
||||
description: "Presentation-only placeholder for writing output in a one-off tool loop.",
|
||||
},
|
||||
} satisfies Record<AgentToolName, AgentToolDescriptor>;
|
||||
|
||||
export const isAllowedAgentToolName = (name: string): name is AgentToolName =>
|
||||
|
||||
@@ -74,7 +74,7 @@ describe("OperatorChat", () => {
|
||||
|
||||
expect(screen.getByText("Prepare the report.")).toBeInTheDocument();
|
||||
expect(screen.getByText("I will use the prepared recipe.")).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: /selectWorkflowNode/i })).toBeInTheDocument();
|
||||
expect(screen.getAllByRole("button", { name: /selectWorkflowNode/i }).length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("renders tool calls as open tool cards", async () => {
|
||||
@@ -151,16 +151,16 @@ describe("OperatorChat", () => {
|
||||
},
|
||||
];
|
||||
|
||||
render(<OperatorChat state={initialPresentationState} messages={messages} />);
|
||||
const { container } = render(<OperatorChat state={initialPresentationState} messages={messages} />);
|
||||
|
||||
expect(screen.queryByRole("group", { name: /issue review resume/i })).not.toBeInTheDocument();
|
||||
expect(screen.getByText("Submit resume request?")).toBeInTheDocument();
|
||||
const tool = screen.getByRole("button", { name: /resumeIssueReview/i });
|
||||
expect(screen.queryByRole("button", { name: /Approve/i })).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole("button", { name: /Deny/i })).not.toBeInTheDocument();
|
||||
expect(screen.getByLabelText("tool input")).toBeInTheDocument();
|
||||
expect(container.querySelector('[data-slot="tool-fallback-args"]')).toBeInTheDocument();
|
||||
await user.click(tool);
|
||||
expect(screen.queryByLabelText("tool input")).not.toBeInTheDocument();
|
||||
expect(container.querySelector('[data-slot="tool-fallback-args"]')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders error and presentation action parts", () => {
|
||||
|
||||
@@ -24,9 +24,10 @@ describe("AssistantOperatorThread", () => {
|
||||
},
|
||||
];
|
||||
|
||||
render(<AssistantOperatorThread mode="dock" messages={messages} />);
|
||||
const { container } = render(<AssistantOperatorThread mode="dock" messages={messages} />);
|
||||
|
||||
expect(screen.getByRole("log", { name: /operator conversation/i })).toBeInTheDocument();
|
||||
expect(container.querySelector('[data-slot="tool-fallback-root"]')).toBeInTheDocument();
|
||||
expect(screen.getByText("I will inspect the run.")).toBeInTheDocument();
|
||||
expect(screen.getByText("The trace is inspectable.")).toBeInTheDocument();
|
||||
const tool = screen.getByRole("button", { name: /readRunTrace/i });
|
||||
@@ -48,9 +49,10 @@ describe("AssistantOperatorThread", () => {
|
||||
},
|
||||
];
|
||||
|
||||
render(<AssistantOperatorThread mode="dock" messages={messages} />);
|
||||
const { container } = render(<AssistantOperatorThread mode="dock" messages={messages} />);
|
||||
|
||||
expect(screen.getByText(/2 tools/i)).toBeInTheDocument();
|
||||
expect(container.querySelector('[data-slot="tool-group-root"]')).toBeInTheDocument();
|
||||
expect(screen.getByText(/2 tool calls/i)).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: /readRunTrace/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: /inspectDeployment/i })).toBeInTheDocument();
|
||||
});
|
||||
@@ -111,4 +113,29 @@ describe("AssistantOperatorThread", () => {
|
||||
await user.click(screen.getByRole("button", { name: /run prepared workflow/i }));
|
||||
expect(run).toHaveBeenCalledOnce();
|
||||
});
|
||||
|
||||
it("renders structured tool results through the generated fallback result slot", () => {
|
||||
const messages: ReadonlyArray<AgentMessage> = [
|
||||
{
|
||||
id: "assistant-result",
|
||||
role: "assistant",
|
||||
parts: [
|
||||
{
|
||||
type: "tool-result",
|
||||
result: {
|
||||
callId: "call-1",
|
||||
name: "readRunTrace",
|
||||
status: "success",
|
||||
output: { frames: 3 },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const { container } = render(<AssistantOperatorThread mode="dock" messages={messages} />);
|
||||
|
||||
expect(container.querySelector('[data-slot="tool-fallback-result"]')).toBeInTheDocument();
|
||||
expect(screen.getByText(/"frames": 3/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,7 +1,24 @@
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { useCallback, useMemo, type ReactNode } from "react";
|
||||
import type { ToolCallMessagePartStatus } from "@assistant-ui/react";
|
||||
import {
|
||||
ToolFallbackArgs,
|
||||
ToolFallbackContent,
|
||||
ToolFallbackError,
|
||||
ToolFallbackResult,
|
||||
ToolFallbackRoot,
|
||||
ToolFallbackTrigger,
|
||||
} from "../../components/assistant-ui/tool-fallback.js";
|
||||
import {
|
||||
ToolGroupContent,
|
||||
ToolGroupRoot,
|
||||
ToolGroupTrigger,
|
||||
} from "../../components/assistant-ui/tool-group.js";
|
||||
import type { AgentMessage } from "../../demo/agent/events.js";
|
||||
import { SchemaApprovalSurface } from "../approval/SchemaApprovalSurface.js";
|
||||
import { projectAgentMessagesForAssistant, type AssistantProjectedMessage } from "./assistantRuntimeProjection.js";
|
||||
import {
|
||||
projectAgentMessagesForAssistant,
|
||||
type AssistantContentPart,
|
||||
} from "./assistantRuntimeProjection.js";
|
||||
|
||||
type AssistantOperatorThreadProps = {
|
||||
readonly mode: "hidden" | "full" | "rail" | "dock";
|
||||
@@ -21,102 +38,97 @@ const formatJson = (value: unknown): string => {
|
||||
}
|
||||
};
|
||||
|
||||
const ToolCard = ({
|
||||
toolName,
|
||||
args,
|
||||
defaultOpen = true,
|
||||
}: {
|
||||
readonly toolName: string;
|
||||
readonly args?: unknown;
|
||||
readonly defaultOpen?: boolean;
|
||||
}) => {
|
||||
const [open, setOpen] = useState(defaultOpen);
|
||||
return (
|
||||
<div className="assistant-tool-card" data-open={open ? "true" : "false"}>
|
||||
<button
|
||||
type="button"
|
||||
className="assistant-tool-card__trigger"
|
||||
aria-expanded={open}
|
||||
onClick={() => setOpen((c) => !c)}
|
||||
>
|
||||
<span className="assistant-tool-card__label">{toolName}</span>
|
||||
</button>
|
||||
{open ? (
|
||||
<div className="assistant-tool-card__body">
|
||||
{args !== undefined ? (
|
||||
<pre className="assistant-tool-card__io" aria-label="tool input">{formatJson(args)}</pre>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
type ToolRenderPart = Extract<AssistantContentPart, { readonly type: "tool-call" | "tool-result" }>;
|
||||
|
||||
type ApprovalContract = {
|
||||
readonly kind: string;
|
||||
readonly outcomes: readonly string[];
|
||||
readonly resumeSchema: unknown;
|
||||
readonly resumePayloadPreview: unknown;
|
||||
readonly runId: string | null;
|
||||
};
|
||||
|
||||
const ToolGroupCard = ({
|
||||
toolCount,
|
||||
defaultOpen = true,
|
||||
children,
|
||||
}: {
|
||||
readonly toolCount: number;
|
||||
readonly defaultOpen?: boolean;
|
||||
readonly children: React.ReactNode;
|
||||
}) => {
|
||||
const [open, setOpen] = useState(defaultOpen);
|
||||
return (
|
||||
<div className="assistant-tool-group" data-open={open ? "true" : "false"}>
|
||||
<button
|
||||
type="button"
|
||||
className="assistant-tool-group__trigger"
|
||||
aria-expanded={open}
|
||||
onClick={() => setOpen((c) => !c)}
|
||||
>
|
||||
<span>{toolCount} tools</span>
|
||||
</button>
|
||||
{open ? <div className="assistant-tool-group__body">{children}</div> : null}
|
||||
</div>
|
||||
);
|
||||
const isRecord = (value: unknown): value is Record<string, unknown> =>
|
||||
typeof value === "object" && value !== null;
|
||||
|
||||
const approvalContractFromArgs = (args: unknown): ApprovalContract | undefined => {
|
||||
if (!isRecord(args) || !isRecord(args.contract)) return undefined;
|
||||
const contract = args.contract;
|
||||
if (
|
||||
typeof contract.kind !== "string" ||
|
||||
!Array.isArray(contract.outcomes) ||
|
||||
!contract.outcomes.every((outcome) => typeof outcome === "string") ||
|
||||
!("resumeSchema" in contract) ||
|
||||
!("resumePayloadPreview" in contract) ||
|
||||
!(typeof contract.runId === "string" || contract.runId === null)
|
||||
) {
|
||||
return undefined;
|
||||
}
|
||||
return {
|
||||
kind: contract.kind,
|
||||
outcomes: contract.outcomes,
|
||||
resumeSchema: contract.resumeSchema,
|
||||
resumePayloadPreview: contract.resumePayloadPreview,
|
||||
runId: contract.runId,
|
||||
};
|
||||
};
|
||||
|
||||
type ContentPart =
|
||||
| { readonly type: "text"; readonly text: string }
|
||||
| { readonly type: "tool-call"; readonly toolName: string; readonly args?: unknown; readonly result?: unknown; readonly isError?: boolean };
|
||||
const statusForToolPart = (part: ToolRenderPart): ToolCallMessagePartStatus | undefined => {
|
||||
if (part.type !== "tool-result") return undefined;
|
||||
if (part.status === "success") return { type: "complete" };
|
||||
return { type: "incomplete", reason: "error", error: part.result };
|
||||
};
|
||||
|
||||
const resultForToolPart = (part: ToolRenderPart): unknown =>
|
||||
part.type === "tool-result" ? part.result : undefined;
|
||||
|
||||
const renderContentPart = (
|
||||
part: ContentPart,
|
||||
part: AssistantContentPart,
|
||||
submitApproval?: (() => void) | undefined,
|
||||
cancelApproval?: (() => void) | undefined,
|
||||
defaultOpen?: boolean,
|
||||
): React.ReactNode => {
|
||||
): ReactNode => {
|
||||
if (part.type === "text") {
|
||||
return <p style={{ whiteSpace: "pre-line" }}>{part.text}</p>;
|
||||
}
|
||||
const status = statusForToolPart(part);
|
||||
const toolName = part.toolName;
|
||||
const args = part.args as Record<string, unknown> | undefined;
|
||||
const contract = args?.contract as
|
||||
| {
|
||||
readonly kind: string;
|
||||
readonly outcomes: readonly string[];
|
||||
readonly resumeSchema: unknown;
|
||||
readonly resumePayloadPreview: unknown;
|
||||
readonly runId: string;
|
||||
}
|
||||
| undefined;
|
||||
const args = part.type === "tool-call" ? part.args : undefined;
|
||||
const contract = part.type === "tool-call" ? approvalContractFromArgs(args) : undefined;
|
||||
const argsText = args !== undefined ? formatJson(args) : undefined;
|
||||
const result = resultForToolPart(part);
|
||||
|
||||
if (toolName === "resumeIssueReview" && contract) {
|
||||
return (
|
||||
<div className="assistant-tool-approval">
|
||||
<SchemaApprovalSurface
|
||||
title={`${contract.kind.replaceAll("_", " ")} resume`}
|
||||
schema={contract.resumeSchema}
|
||||
payload={contract.resumePayloadPreview}
|
||||
outcomes={contract.outcomes}
|
||||
runId={contract.runId}
|
||||
onSubmit={submitApproval}
|
||||
onCancel={cancelApproval}
|
||||
/>
|
||||
</div>
|
||||
<ToolFallbackRoot defaultOpen={defaultOpen ?? true}>
|
||||
<ToolFallbackTrigger toolName={toolName} status={{ type: "requires-action", reason: "interrupt" }} />
|
||||
<ToolFallbackContent>
|
||||
{argsText !== undefined ? <ToolFallbackArgs argsText={argsText} /> : null}
|
||||
<div className="assistant-tool-approval">
|
||||
<SchemaApprovalSurface
|
||||
title={`${contract.kind.replaceAll("_", " ")} resume`}
|
||||
schema={contract.resumeSchema}
|
||||
payload={contract.resumePayloadPreview}
|
||||
outcomes={contract.outcomes}
|
||||
runId={contract.runId}
|
||||
onSubmit={submitApproval}
|
||||
onCancel={cancelApproval}
|
||||
/>
|
||||
</div>
|
||||
</ToolFallbackContent>
|
||||
</ToolFallbackRoot>
|
||||
);
|
||||
}
|
||||
return <ToolCard toolName={toolName} args={part.args} {...(defaultOpen !== undefined ? { defaultOpen } : {})} />;
|
||||
return (
|
||||
<ToolFallbackRoot defaultOpen={defaultOpen ?? true}>
|
||||
<ToolFallbackTrigger toolName={toolName} {...(status !== undefined ? { status } : {})} />
|
||||
<ToolFallbackContent>
|
||||
<ToolFallbackError {...(status !== undefined ? { status } : {})} />
|
||||
{argsText !== undefined ? <ToolFallbackArgs argsText={argsText} /> : null}
|
||||
<ToolFallbackResult result={result} />
|
||||
</ToolFallbackContent>
|
||||
</ToolFallbackRoot>
|
||||
);
|
||||
};
|
||||
|
||||
const AssistantMessageBody = ({
|
||||
@@ -124,51 +136,56 @@ const AssistantMessageBody = ({
|
||||
submitApproval,
|
||||
cancelApproval,
|
||||
}: {
|
||||
readonly parts: readonly ContentPart[];
|
||||
readonly parts: readonly AssistantContentPart[];
|
||||
readonly submitApproval?: (() => void) | undefined;
|
||||
readonly cancelApproval?: (() => void) | undefined;
|
||||
}) => {
|
||||
const toolParts = parts.filter((p) => p.type === "tool-call");
|
||||
const rendered: ReactNode[] = [];
|
||||
let index = 0;
|
||||
|
||||
if (toolParts.length === 0) {
|
||||
return (
|
||||
<>
|
||||
{parts.filter((p) => p.type === "text").map((p, i) => (
|
||||
<p key={`text-${i}`} style={{ whiteSpace: "pre-line" }}>{p.text}</p>
|
||||
))}
|
||||
</>
|
||||
while (index < parts.length) {
|
||||
const part = parts[index]!;
|
||||
if (part.type === "text") {
|
||||
rendered.push(
|
||||
<p key={`text-${index}`} style={{ whiteSpace: "pre-line" }}>{part.text}</p>,
|
||||
);
|
||||
index += 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
const toolRunStart = index;
|
||||
const toolRun: ToolRenderPart[] = [];
|
||||
while (index < parts.length && parts[index]!.type !== "text") {
|
||||
toolRun.push(parts[index]! as ToolRenderPart);
|
||||
index += 1;
|
||||
}
|
||||
|
||||
if (toolRun.length === 1) {
|
||||
rendered.push(
|
||||
<div key={`tool-${toolRunStart}`}>
|
||||
{renderContentPart(toolRun[0]!, submitApproval, cancelApproval)}
|
||||
</div>,
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
rendered.push(
|
||||
<ToolGroupRoot key={`tool-group-${toolRunStart}`} defaultOpen>
|
||||
<ToolGroupTrigger count={toolRun.length} />
|
||||
<ToolGroupContent>
|
||||
{toolRun.map((tool, toolIndex) => (
|
||||
<div key={`${tool.type}-${tool.toolName}-${tool.toolCallId ?? "no-id"}-${toolIndex}`}>
|
||||
{renderContentPart(tool, submitApproval, cancelApproval, false)}
|
||||
</div>
|
||||
))}
|
||||
</ToolGroupContent>
|
||||
</ToolGroupRoot>,
|
||||
);
|
||||
}
|
||||
|
||||
if (toolParts.length === 1) {
|
||||
const firstToolIndex = parts.findIndex((p) => p.type === "tool-call");
|
||||
const beforeText = parts.slice(0, firstToolIndex).filter((p) => p.type === "text");
|
||||
const afterText = parts.slice(firstToolIndex + 1).filter((p) => p.type === "text");
|
||||
const tool = toolParts[0]!;
|
||||
return (
|
||||
<>
|
||||
{beforeText.map((p, i) => <p key={`before-${i}`} style={{ whiteSpace: "pre-line" }}>{p.text}</p>)}
|
||||
{renderContentPart(tool, submitApproval, cancelApproval)}
|
||||
{afterText.map((p, i) => <p key={`after-${i}`} style={{ whiteSpace: "pre-line" }}>{p.text}</p>)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const firstToolIndex = parts.findIndex((p) => p.type === "tool-call");
|
||||
const lastToolIndex = parts.findLastIndex((p) => p.type === "tool-call");
|
||||
const beforeText = parts.slice(0, firstToolIndex).filter((p) => p.type === "text");
|
||||
const afterText = parts.slice(lastToolIndex + 1).filter((p) => p.type === "text");
|
||||
return (
|
||||
<>
|
||||
{beforeText.map((p, i) => <p key={`before-${i}`} style={{ whiteSpace: "pre-line" }}>{p.text}</p>)}
|
||||
<ToolGroupCard toolCount={toolParts.length}>
|
||||
{toolParts.map((tool, i) => (
|
||||
<div key={i}>
|
||||
{renderContentPart(tool, submitApproval, cancelApproval, false)}
|
||||
</div>
|
||||
))}
|
||||
</ToolGroupCard>
|
||||
{afterText.map((p, i) => <p key={`after-${i}`} style={{ whiteSpace: "pre-line" }}>{p.text}</p>)}
|
||||
{rendered}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -178,7 +195,7 @@ const MessageBubble = ({
|
||||
children,
|
||||
}: {
|
||||
readonly role: "user" | "assistant";
|
||||
readonly children: React.ReactNode;
|
||||
readonly children: ReactNode;
|
||||
}) => (
|
||||
<div className="assistant-message" data-role={role}>
|
||||
{role === "user" ? (
|
||||
@@ -209,17 +226,10 @@ export const AssistantOperatorThread = ({
|
||||
<div className="assistant-thread">
|
||||
<div className="assistant-thread__viewport">
|
||||
{projected.map((message) => {
|
||||
const content = (message as unknown as { content?: unknown }).content;
|
||||
const parts: ContentPart[] = Array.isArray(content)
|
||||
? (content as ContentPart[])
|
||||
: typeof content === "string"
|
||||
? [{ type: "text" as const, text: content }]
|
||||
: [];
|
||||
|
||||
if (message.role === "user") {
|
||||
return (
|
||||
<MessageBubble key={message.id} role="user">
|
||||
{parts.filter((p) => p.type === "text").map((p, i) => (
|
||||
{message.content.filter((p) => p.type === "text").map((p, i) => (
|
||||
<p key={`text-${i}`} style={{ whiteSpace: "pre-line" }}>{p.text}</p>
|
||||
))}
|
||||
</MessageBubble>
|
||||
@@ -229,7 +239,7 @@ export const AssistantOperatorThread = ({
|
||||
return (
|
||||
<MessageBubble key={message.id} role="assistant">
|
||||
<AssistantMessageBody
|
||||
parts={parts}
|
||||
parts={message.content}
|
||||
submitApproval={submitApproval}
|
||||
cancelApproval={cancelApproval}
|
||||
/>
|
||||
|
||||
@@ -36,7 +36,7 @@ describe("assistantRuntimeProjection", () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it("projects tool results as text summary", () => {
|
||||
it("projects tool results as structured result parts", () => {
|
||||
const messages: ReadonlyArray<AgentMessage> = [
|
||||
{
|
||||
id: "tool-result-message",
|
||||
@@ -57,13 +57,15 @@ describe("assistantRuntimeProjection", () => {
|
||||
|
||||
const projected = projectAgentMessagesForAssistant(messages);
|
||||
|
||||
expect(projected[0]).toMatchObject({
|
||||
id: "tool-result-message",
|
||||
role: "assistant",
|
||||
content: [
|
||||
{ type: "text", text: "Result for readRunTrace: success" },
|
||||
],
|
||||
});
|
||||
expect(projected[0]?.content).toEqual([
|
||||
{
|
||||
type: "tool-result",
|
||||
toolCallId: "call-1",
|
||||
toolName: "readRunTrace",
|
||||
status: "success",
|
||||
result: { frames: 3 },
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
it("projects approval requests as human tool calls with contract metadata", () => {
|
||||
|
||||
@@ -8,16 +8,20 @@ export type AssistantToolRenderPayload = {
|
||||
readonly isError?: boolean;
|
||||
};
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- JSON-serializable args for assistant-ui compatibility
|
||||
type JsonArgs = Record<string, any>;
|
||||
|
||||
type AssistantContentPart =
|
||||
export type AssistantContentPart =
|
||||
| { readonly type: "text"; readonly text: string }
|
||||
| {
|
||||
readonly type: "tool-call";
|
||||
readonly toolCallId?: string;
|
||||
readonly toolName: string;
|
||||
readonly args?: JsonArgs;
|
||||
readonly args?: unknown;
|
||||
}
|
||||
| {
|
||||
readonly type: "tool-result";
|
||||
readonly toolCallId: string;
|
||||
readonly toolName: string;
|
||||
readonly status: "success" | "failure";
|
||||
readonly result: unknown;
|
||||
};
|
||||
|
||||
export type AssistantProjectedMessage = {
|
||||
@@ -35,19 +39,22 @@ const projectPart = (part: AgentMessagePart): AssistantContentPart[] => {
|
||||
type: "tool-call",
|
||||
toolCallId: part.call.id,
|
||||
toolName: part.call.name,
|
||||
args: part.call.input as JsonArgs,
|
||||
args: part.call.input,
|
||||
}];
|
||||
case "tool-result":
|
||||
return [{
|
||||
type: "text",
|
||||
text: `Result for ${part.result.name}: ${part.result.status === "failure" ? "error" : "success"}`,
|
||||
type: "tool-result",
|
||||
toolCallId: part.result.callId,
|
||||
toolName: part.result.name,
|
||||
status: part.result.status,
|
||||
result: part.result.output,
|
||||
}];
|
||||
case "presentation-action":
|
||||
return [{
|
||||
type: "tool-call",
|
||||
toolCallId: `presentation-${part.action.type}`,
|
||||
toolName: `presentation.${part.action.type}`,
|
||||
args: part.action as JsonArgs,
|
||||
args: part.action,
|
||||
}];
|
||||
case "approval-request":
|
||||
return [
|
||||
@@ -59,7 +66,7 @@ const projectPart = (part: AgentMessagePart): AssistantContentPart[] => {
|
||||
args: {
|
||||
prompt: part.prompt,
|
||||
contract: part.contract,
|
||||
} as JsonArgs,
|
||||
},
|
||||
},
|
||||
];
|
||||
case "error":
|
||||
|
||||
@@ -15,7 +15,7 @@ describe("ProblemLoopScene", () => {
|
||||
const transcript = screen.getByRole("log", { name: /one-off assistant transcript/i });
|
||||
expect(transcript).toHaveClass("assistant-operator-thread");
|
||||
expect(within(transcript).getByText("Can you finish this workspace task?")).toBeInTheDocument();
|
||||
const toolButtons = within(transcript).getAllByRole("button", { name: /workflow.run_once/i });
|
||||
const toolButtons = within(transcript).getAllByRole("button", { name: /fetchData|transformPayload|writeOutput/i });
|
||||
expect(toolButtons).toHaveLength(3);
|
||||
expect(within(transcript).getByText("Done. But none of this is recorded in a durable workflow.")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import type { AgentMessage } from "../../demo/agent/events.js";
|
||||
import type { AgentToolName } from "../../demo/agent/tools.js";
|
||||
import { AssistantOperatorThread } from "../chat/AssistantOperatorThread.js";
|
||||
import { StageCaption } from "../StageCaption.js";
|
||||
import type { SceneBeatDefinition, SceneDefinition } from "../storyboard.js";
|
||||
@@ -20,7 +19,7 @@ const oneOffToolLoopMessages: ReadonlyArray<AgentMessage> = [
|
||||
type: "tool-call",
|
||||
call: {
|
||||
id: "scene-2-tool-1",
|
||||
name: "workflow.run_once" as AgentToolName,
|
||||
name: "fetchData",
|
||||
input: { source: "api", endpoint: "/tasks" },
|
||||
},
|
||||
},
|
||||
@@ -28,7 +27,7 @@ const oneOffToolLoopMessages: ReadonlyArray<AgentMessage> = [
|
||||
type: "tool-call",
|
||||
call: {
|
||||
id: "scene-2-tool-2",
|
||||
name: "workflow.run_once" as AgentToolName,
|
||||
name: "transformPayload",
|
||||
input: { format: "json", validate: true },
|
||||
},
|
||||
},
|
||||
@@ -36,7 +35,7 @@ const oneOffToolLoopMessages: ReadonlyArray<AgentMessage> = [
|
||||
type: "tool-call",
|
||||
call: {
|
||||
id: "scene-2-tool-3",
|
||||
name: "workflow.run_once" as AgentToolName,
|
||||
name: "writeOutput",
|
||||
input: { destination: "file", path: "/tmp/result.json" },
|
||||
},
|
||||
},
|
||||
@@ -70,7 +69,7 @@ export const ProblemLoopScene = ({ scene, beat }: ProblemLoopSceneProps) => {
|
||||
<h2>Chat + tool loop</h2>
|
||||
<p>Good at getting through one request.</p>
|
||||
</header>
|
||||
<div aria-label="one-off assistant transcript" role="group">
|
||||
<div className="problem-chat-card__transcript" aria-label="one-off assistant transcript" role="group">
|
||||
<AssistantOperatorThread mode="dock" messages={oneOffToolLoopMessages} ariaLabel="one-off assistant transcript" />
|
||||
</div>
|
||||
<p className="problem-artifact-note">The useful work lives in the conversation history.</p>
|
||||
|
||||
@@ -1406,9 +1406,10 @@
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(24rem, 0.95fr) auto minmax(26rem, 1.05fr);
|
||||
grid-template-columns: minmax(24rem, 0.92fr) auto minmax(26rem, 1.08fr);
|
||||
align-items: stretch;
|
||||
gap: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.problem-chat-card,
|
||||
@@ -1416,13 +1417,14 @@
|
||||
min-width: 0;
|
||||
border: 1px solid color-mix(in oklch, var(--stage-line) 62%, transparent);
|
||||
border-radius: 0.95rem;
|
||||
padding: 0.85rem;
|
||||
padding: 0.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.problem-chat-card {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
gap: 0.65rem;
|
||||
gap: 0.45rem;
|
||||
background:
|
||||
linear-gradient(180deg, color-mix(in oklch, var(--stage-inset) 94%, black), var(--stage-inset));
|
||||
}
|
||||
@@ -1456,14 +1458,23 @@
|
||||
.problem-artifact-header h2 {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
font: 800 1.45rem/0.98 var(--font-interface);
|
||||
font: 800 1.32rem/0.98 var(--font-interface);
|
||||
}
|
||||
|
||||
.problem-artifact-header p,
|
||||
.problem-artifact-note {
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
font: 0.86rem/1.3 var(--font-interface);
|
||||
font: 0.8rem/1.25 var(--font-interface);
|
||||
}
|
||||
|
||||
.problem-chat-card .problem-artifact-note {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.problem-chat-card__transcript {
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.problem-blueprint .concept-rail {
|
||||
@@ -1476,7 +1487,7 @@
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
padding: 0.72rem 0.45rem;
|
||||
padding: 0.55rem 0.4rem;
|
||||
}
|
||||
|
||||
.problem-blueprint .concept-node__copy span,
|
||||
@@ -1599,9 +1610,15 @@
|
||||
|
||||
.assistant-operator-thread {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
gap: 0.55rem;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.assistant-operator-thread[data-mode="hidden"] {
|
||||
@@ -1624,9 +1641,17 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.assistant-thread {
|
||||
overflow: hidden;
|
||||
border: 1px solid color-mix(in oklch, var(--stage-line) 70%, transparent);
|
||||
border-radius: 0.72rem;
|
||||
background: color-mix(in oklch, var(--stage-inset) 86%, black);
|
||||
}
|
||||
|
||||
.assistant-thread__viewport {
|
||||
overflow: auto;
|
||||
scrollbar-width: none;
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.assistant-thread__viewport::-webkit-scrollbar {
|
||||
@@ -1635,8 +1660,8 @@
|
||||
|
||||
.assistant-message {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
margin-bottom: 0.65rem;
|
||||
gap: 0.36rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.assistant-message[data-role="user"] {
|
||||
@@ -1644,96 +1669,101 @@
|
||||
}
|
||||
|
||||
.assistant-message__user-bubble {
|
||||
background: color-mix(in oklch, var(--accent-cyan) 14%, var(--stage-surface));
|
||||
border: 1px solid color-mix(in oklch, var(--accent-cyan) 30%, var(--stage-line));
|
||||
border-radius: 0.65rem;
|
||||
padding: 0.55rem 0.75rem;
|
||||
max-width: 80%;
|
||||
background: color-mix(in oklch, var(--accent-cyan) 24%, var(--stage-inset));
|
||||
border: 1px solid color-mix(in oklch, var(--accent-cyan) 44%, var(--stage-line));
|
||||
border-radius: 0.55rem;
|
||||
padding: 0.48rem 0.65rem;
|
||||
max-width: 76%;
|
||||
color: var(--text-primary);
|
||||
font: 0.82rem/1.5 var(--font-interface);
|
||||
font: 0.76rem/1.35 var(--font-interface);
|
||||
}
|
||||
|
||||
.assistant-message[data-role="assistant"] {
|
||||
justify-items: start;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.assistant-tool-card {
|
||||
border: 1px solid var(--stage-line);
|
||||
border-radius: 0.65rem;
|
||||
background: var(--stage-inset);
|
||||
/*
|
||||
assistant-ui ships utility-class components. Bridge their stable data-slot
|
||||
hooks into the presentation tokens instead of editing generated files.
|
||||
*/
|
||||
.assistant-operator-thread [data-slot="tool-group-root"],
|
||||
.assistant-operator-thread [data-slot="tool-fallback-root"] {
|
||||
width: min(100%, 30rem);
|
||||
border: 1px solid color-mix(in oklch, var(--stage-line) 72%, transparent);
|
||||
border-radius: 0.55rem;
|
||||
background: color-mix(in oklch, var(--stage-surface) 58%, var(--stage-inset));
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.assistant-tool-card__trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
.assistant-operator-thread [data-slot="tool-group-root"] {
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
.assistant-operator-thread [data-slot="tool-group-trigger"],
|
||||
.assistant-operator-thread [data-slot="tool-fallback-trigger"] {
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.65rem;
|
||||
background: none;
|
||||
border: none;
|
||||
min-height: 0;
|
||||
gap: 0.32rem;
|
||||
padding: 0.3rem 0.48rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
font: 700 0.61rem/1 var(--font-evidence);
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.assistant-operator-thread [data-slot="tool-group-trigger"]:hover,
|
||||
.assistant-operator-thread [data-slot="tool-fallback-trigger"]:hover {
|
||||
background: color-mix(in oklch, var(--accent-cyan) 9%, transparent);
|
||||
color: var(--text-primary);
|
||||
font: 600 0.78rem/1 var(--font-interface);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.assistant-tool-card__trigger:hover {
|
||||
background: color-mix(in oklch, var(--accent-cyan) 8%, transparent);
|
||||
.assistant-operator-thread [data-slot="tool-fallback-trigger-icon"],
|
||||
.assistant-operator-thread [data-slot="tool-fallback-trigger-chevron"],
|
||||
.assistant-operator-thread [data-slot="tool-group-trigger-chevron"] {
|
||||
width: 0.68rem;
|
||||
height: 0.68rem;
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.assistant-tool-card__body {
|
||||
padding: 0 0.65rem 0.55rem;
|
||||
.assistant-operator-thread [data-slot="tool-group-content"] > div,
|
||||
.assistant-operator-thread [data-slot="tool-fallback-content"] > div {
|
||||
gap: 0.22rem;
|
||||
padding: 0.3rem 0.48rem 0.42rem;
|
||||
border-top: 1px solid color-mix(in oklch, var(--stage-line) 55%, transparent);
|
||||
}
|
||||
|
||||
.assistant-tool-card__io {
|
||||
background: var(--stage-surface);
|
||||
border: 1px solid var(--stage-line);
|
||||
border-radius: 0.5rem;
|
||||
.assistant-operator-thread [data-slot="tool-group-content"] [data-slot="tool-fallback-root"] {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
background: color-mix(in oklch, var(--stage-inset) 86%, black);
|
||||
border-color: color-mix(in oklch, var(--stage-line) 60%, transparent);
|
||||
}
|
||||
|
||||
.assistant-operator-thread [data-slot="tool-fallback-args-value"],
|
||||
.assistant-operator-thread [data-slot="tool-fallback-result-content"] {
|
||||
max-height: 6.5rem;
|
||||
overflow: auto;
|
||||
border: 1px solid color-mix(in oklch, var(--stage-line) 55%, transparent);
|
||||
border-radius: 0.45rem;
|
||||
background: color-mix(in oklch, var(--stage-inset) 72%, black);
|
||||
color: var(--text-secondary);
|
||||
padding: 0.45rem 0.55rem;
|
||||
font: 0.72rem/1.45 var(--font-mono);
|
||||
color: var(--text-secondary);
|
||||
font: 0.68rem/1.38 var(--font-mono);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
overflow-x: auto;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.assistant-tool-group {
|
||||
border: 1px solid var(--stage-line);
|
||||
border-radius: 0.65rem;
|
||||
background: var(--stage-inset);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.assistant-tool-group__trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.65rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font: 600 0.78rem/1 var(--font-interface);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.assistant-tool-group__trigger:hover {
|
||||
background: color-mix(in oklch, var(--accent-cyan) 8%, transparent);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.assistant-tool-group__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
padding: 0 0.65rem 0.55rem;
|
||||
max-height: 14rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.assistant-tool-group__body .assistant-tool-card {
|
||||
border-color: var(--stage-line);
|
||||
.assistant-operator-thread [data-slot="tool-fallback-result-header"],
|
||||
.assistant-operator-thread [data-slot="tool-fallback-error-header"] {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
font: 700 0.66rem/1 var(--font-evidence);
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.assistant-tool-approval {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import "tw-shimmer";
|
||||
|
||||
:root {
|
||||
--color-paper: #faf8f5;
|
||||
--color-ink: #1a1a1a;
|
||||
|
||||
Reference in New Issue
Block a user