414 lines
16 KiB
TypeScript
414 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { Position, type Node, type NodeProps } from "@xyflow/react";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
import BaseNodeWrapper from "./base-node-wrapper";
|
|
import CanvasHandle from "@/components/canvas/canvas-handle";
|
|
|
|
type AgentOutputNodeData = {
|
|
isSkeleton?: boolean;
|
|
stepId?: string;
|
|
stepIndex?: number;
|
|
stepTotal?: number;
|
|
title?: string;
|
|
channel?: string;
|
|
artifactType?: string;
|
|
previewText?: string;
|
|
sections?: Array<{
|
|
id?: string;
|
|
label?: string;
|
|
content?: string;
|
|
}>;
|
|
metadata?: Record<string, string | string[] | unknown>;
|
|
metadataLabels?: Record<string, string | unknown>;
|
|
qualityChecks?: string[];
|
|
outputType?: string;
|
|
body?: string;
|
|
_status?: string;
|
|
_statusMessage?: string;
|
|
};
|
|
|
|
type AgentOutputNodeType = Node<AgentOutputNodeData, "agent-output">;
|
|
|
|
function tryFormatJsonBody(body: string): string | null {
|
|
const trimmed = body.trim();
|
|
if (!trimmed) {
|
|
return null;
|
|
}
|
|
|
|
const looksLikeJsonObject = trimmed.startsWith("{") && trimmed.endsWith("}");
|
|
const looksLikeJsonArray = trimmed.startsWith("[") && trimmed.endsWith("]");
|
|
if (!looksLikeJsonObject && !looksLikeJsonArray) {
|
|
return null;
|
|
}
|
|
|
|
try {
|
|
const parsed = JSON.parse(trimmed) as unknown;
|
|
return JSON.stringify(parsed, null, 2);
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function normalizeSections(raw: AgentOutputNodeData["sections"]) {
|
|
if (!Array.isArray(raw)) {
|
|
return [] as Array<{ id: string; label: string; content: string }>;
|
|
}
|
|
|
|
const sections: Array<{ id: string; label: string; content: string }> = [];
|
|
for (const item of raw) {
|
|
const label = typeof item?.label === "string" ? item.label.trim() : "";
|
|
const content = typeof item?.content === "string" ? item.content.trim() : "";
|
|
if (label === "" || content === "") {
|
|
continue;
|
|
}
|
|
const id = typeof item.id === "string" && item.id.trim() !== "" ? item.id.trim() : label;
|
|
sections.push({ id, label, content });
|
|
}
|
|
|
|
return sections;
|
|
}
|
|
|
|
function normalizeMetadata(raw: AgentOutputNodeData["metadata"]) {
|
|
if (!raw || typeof raw !== "object" || Array.isArray(raw)) {
|
|
return [] as Array<[string, string]>;
|
|
}
|
|
|
|
const entries: Array<[string, string]> = [];
|
|
for (const [rawKey, rawValue] of Object.entries(raw)) {
|
|
const key = rawKey.trim();
|
|
if (key === "") {
|
|
continue;
|
|
}
|
|
|
|
if (typeof rawValue === "string") {
|
|
const value = rawValue.trim();
|
|
if (value !== "") {
|
|
entries.push([key, value]);
|
|
}
|
|
continue;
|
|
}
|
|
|
|
if (Array.isArray(rawValue)) {
|
|
const values = rawValue
|
|
.filter((value): value is string => typeof value === "string")
|
|
.map((value) => value.trim())
|
|
.filter((value) => value !== "");
|
|
if (values.length > 0) {
|
|
entries.push([key, values.join(", ")]);
|
|
}
|
|
}
|
|
}
|
|
|
|
return entries;
|
|
}
|
|
|
|
function resolveMetadataLabel(
|
|
key: string,
|
|
rawLabels: AgentOutputNodeData["metadataLabels"],
|
|
): string {
|
|
if (!rawLabels || typeof rawLabels !== "object" || Array.isArray(rawLabels)) {
|
|
return key;
|
|
}
|
|
|
|
const candidate = rawLabels[key];
|
|
return typeof candidate === "string" && candidate.trim() !== "" ? candidate.trim() : key;
|
|
}
|
|
|
|
function normalizeQualityChecks(raw: AgentOutputNodeData["qualityChecks"]): string[] {
|
|
if (!Array.isArray(raw)) {
|
|
return [];
|
|
}
|
|
|
|
return raw
|
|
.filter((value): value is string => typeof value === "string")
|
|
.map((value) => value.trim())
|
|
.filter((value) => value !== "");
|
|
}
|
|
|
|
function normalizeSectionToken(value: string): string {
|
|
return value.toLowerCase().replace(/[^a-z0-9]+/g, "");
|
|
}
|
|
|
|
function partitionSections(
|
|
sections: Array<{ id: string; label: string; content: string }>,
|
|
artifactType: string,
|
|
) {
|
|
const artifactToken = normalizeSectionToken(artifactType);
|
|
const priorityTokens = artifactToken === "socialcaptionpack" ? ["caption", "hashtags", "cta"] : [];
|
|
const isSecondaryNote = (label: string) => {
|
|
const token = normalizeSectionToken(label);
|
|
return token.includes("formatnote") || token.includes("assumption");
|
|
};
|
|
|
|
const primaryWithIndex: Array<{ section: (typeof sections)[number]; index: number }> = [];
|
|
const secondary: Array<{ id: string; label: string; content: string }> = [];
|
|
|
|
sections.forEach((section, index) => {
|
|
if (isSecondaryNote(section.label)) {
|
|
secondary.push(section);
|
|
return;
|
|
}
|
|
primaryWithIndex.push({ section, index });
|
|
});
|
|
|
|
if (priorityTokens.length === 0) {
|
|
return {
|
|
primary: primaryWithIndex.map((entry) => entry.section),
|
|
secondary,
|
|
};
|
|
}
|
|
|
|
const priorityIndexByToken = new Map(priorityTokens.map((token, index) => [token, index]));
|
|
const primary = [...primaryWithIndex]
|
|
.sort((left, right) => {
|
|
const leftToken = normalizeSectionToken(left.section.label);
|
|
const rightToken = normalizeSectionToken(right.section.label);
|
|
const leftPriority = priorityIndexByToken.get(leftToken);
|
|
const rightPriority = priorityIndexByToken.get(rightToken);
|
|
|
|
if (leftPriority !== undefined && rightPriority !== undefined) {
|
|
return leftPriority - rightPriority;
|
|
}
|
|
if (leftPriority !== undefined) {
|
|
return -1;
|
|
}
|
|
if (rightPriority !== undefined) {
|
|
return 1;
|
|
}
|
|
return left.index - right.index;
|
|
})
|
|
.map((entry) => entry.section);
|
|
|
|
return {
|
|
primary,
|
|
secondary,
|
|
};
|
|
}
|
|
|
|
export default function AgentOutputNode({ id, data, selected }: NodeProps<AgentOutputNodeType>) {
|
|
const t = useTranslations("agentOutputNode");
|
|
const nodeData = data as AgentOutputNodeData;
|
|
const isSkeleton = nodeData.isSkeleton === true;
|
|
const hasStepCounter =
|
|
typeof nodeData.stepIndex === "number" &&
|
|
Number.isFinite(nodeData.stepIndex) &&
|
|
typeof nodeData.stepTotal === "number" &&
|
|
Number.isFinite(nodeData.stepTotal) &&
|
|
nodeData.stepTotal > 0;
|
|
const safeStepIndex =
|
|
typeof nodeData.stepIndex === "number" && Number.isFinite(nodeData.stepIndex)
|
|
? Math.max(0, Math.floor(nodeData.stepIndex))
|
|
: 0;
|
|
const safeStepTotal =
|
|
typeof nodeData.stepTotal === "number" && Number.isFinite(nodeData.stepTotal)
|
|
? Math.max(1, Math.floor(nodeData.stepTotal))
|
|
: 1;
|
|
const stepCounter = hasStepCounter
|
|
? `${safeStepIndex + 1}/${safeStepTotal}`
|
|
: null;
|
|
const resolvedTitle =
|
|
nodeData.title ??
|
|
(isSkeleton ? t("plannedOutputDefaultTitle") : t("defaultTitle"));
|
|
const body = nodeData.body ?? "";
|
|
const artifactType = nodeData.artifactType ?? nodeData.outputType ?? "";
|
|
const sections = normalizeSections(nodeData.sections);
|
|
const { primary: primarySections, secondary: secondarySections } = partitionSections(
|
|
sections,
|
|
artifactType,
|
|
);
|
|
const metadataEntries = normalizeMetadata(nodeData.metadata);
|
|
const metadataLabels = nodeData.metadataLabels;
|
|
const qualityChecks = normalizeQualityChecks(nodeData.qualityChecks);
|
|
const previewText =
|
|
typeof nodeData.previewText === "string" && nodeData.previewText.trim() !== ""
|
|
? nodeData.previewText.trim()
|
|
: primarySections[0]?.content ?? sections[0]?.content ?? "";
|
|
const hasStructuredOutput =
|
|
sections.length > 0 || metadataEntries.length > 0 || qualityChecks.length > 0 || previewText !== "";
|
|
const hasMetaValues =
|
|
(typeof nodeData.channel === "string" && nodeData.channel.trim() !== "") || artifactType.trim() !== "";
|
|
const hasDetailsContent =
|
|
secondarySections.length > 0 || metadataEntries.length > 0 || qualityChecks.length > 0 || hasMetaValues;
|
|
const formattedJsonBody = isSkeleton ? null : tryFormatJsonBody(body);
|
|
|
|
return (
|
|
<BaseNodeWrapper
|
|
nodeType="agent-output"
|
|
selected={selected}
|
|
status={nodeData._status}
|
|
statusMessage={nodeData._statusMessage}
|
|
className={`min-w-[300px] border-amber-500/30 ${isSkeleton ? "opacity-80" : ""}`}
|
|
>
|
|
<CanvasHandle
|
|
nodeId={id}
|
|
nodeType="agent-output"
|
|
type="target"
|
|
position={Position.Left}
|
|
id="agent-output-in"
|
|
className="!h-3 !w-3 !bg-amber-500 !border-2 !border-background"
|
|
/>
|
|
|
|
<div className="flex h-full flex-col gap-3 p-3">
|
|
<header className="space-y-1">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<p className="truncate text-xs font-semibold text-foreground" title={resolvedTitle}>
|
|
{resolvedTitle}
|
|
</p>
|
|
{isSkeleton ? (
|
|
<span className="shrink-0 rounded-full border border-amber-500/50 bg-amber-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-800 dark:text-amber-200">
|
|
{t("skeletonBadge")}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
{isSkeleton ? (
|
|
<p className="text-[11px] text-amber-700/90 dark:text-amber-300/90">
|
|
{t("plannedOutputLabel")}
|
|
{stepCounter ? ` - ${stepCounter}` : ""}
|
|
{nodeData.stepId ? ` - ${nodeData.stepId}` : ""}
|
|
</p>
|
|
) : null}
|
|
</header>
|
|
|
|
{isSkeleton ? (
|
|
<section className="space-y-1">
|
|
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
|
{t("bodyLabel")}
|
|
</p>
|
|
<div
|
|
data-testid="agent-output-skeleton-body"
|
|
className="animate-pulse rounded-md border border-dashed border-amber-500/40 bg-gradient-to-r from-amber-500/10 via-amber-500/20 to-amber-500/10 p-3"
|
|
>
|
|
<p className="text-[11px] text-amber-800/90 dark:text-amber-200/90">{t("plannedContent")}</p>
|
|
</div>
|
|
</section>
|
|
) : hasStructuredOutput ? (
|
|
<>
|
|
{previewText !== "" ? (
|
|
<section data-testid="agent-output-preview" className="space-y-1">
|
|
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">{t("previewLabel")}</p>
|
|
<div className="max-h-40 overflow-auto rounded-md border border-border/70 bg-background/70 p-3 text-[13px] leading-relaxed text-foreground/90">
|
|
<p className="whitespace-pre-wrap break-words">{previewText}</p>
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{primarySections.length > 0 ? (
|
|
<section data-testid="agent-output-sections" className="space-y-1.5">
|
|
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">{t("sectionsLabel")}</p>
|
|
<div className="space-y-1.5">
|
|
{primarySections.map((section) => (
|
|
<div key={section.id} className="rounded-md border border-border/70 bg-background/70 p-2">
|
|
<p className="text-[11px] font-semibold text-foreground/90">{section.label}</p>
|
|
<p className="whitespace-pre-wrap break-words text-[12px] leading-relaxed text-foreground/90">
|
|
{section.content}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{hasDetailsContent ? (
|
|
<details data-testid="agent-output-details" className="rounded-md border border-border/70 bg-muted/30 px-2 py-1.5">
|
|
<summary className="cursor-pointer text-[11px] font-semibold text-foreground/80">{t("detailsLabel")}</summary>
|
|
<div className="mt-2 space-y-2">
|
|
{hasMetaValues ? (
|
|
<section
|
|
data-testid="agent-output-meta-strip"
|
|
className="grid grid-cols-2 gap-2 rounded-md border border-border/70 bg-background/70 px-2 py-1.5"
|
|
>
|
|
<div className="min-w-0">
|
|
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">{t("channelLabel")}</p>
|
|
<p className="truncate text-xs font-medium text-foreground/90" title={nodeData.channel}>
|
|
{nodeData.channel ?? t("emptyValue")}
|
|
</p>
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">{t("artifactTypeLabel")}</p>
|
|
<p className="truncate text-xs font-medium text-foreground/90" title={artifactType}>
|
|
{artifactType || t("emptyValue")}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{secondarySections.length > 0 ? (
|
|
<section data-testid="agent-output-secondary-sections" className="space-y-1.5">
|
|
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">{t("sectionsLabel")}</p>
|
|
<div className="space-y-1.5">
|
|
{secondarySections.map((section) => (
|
|
<div key={section.id} className="rounded-md border border-border/70 bg-background/70 p-2">
|
|
<p className="text-[11px] font-semibold text-foreground/90">{section.label}</p>
|
|
<p className="whitespace-pre-wrap break-words text-[12px] leading-relaxed text-foreground/90">
|
|
{section.content}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{metadataEntries.length > 0 ? (
|
|
<section data-testid="agent-output-metadata" className="space-y-1.5">
|
|
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">{t("metadataLabel")}</p>
|
|
<div className="space-y-1 text-[12px] text-foreground/90">
|
|
{metadataEntries.map(([key, value]) => (
|
|
<p key={key} className="break-words">
|
|
<span className="font-semibold">{resolveMetadataLabel(key, metadataLabels)}</span>: {value}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{qualityChecks.length > 0 ? (
|
|
<section data-testid="agent-output-quality-checks" className="space-y-1.5">
|
|
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">{t("qualityChecksLabel")}</p>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{qualityChecks.map((qualityCheck) => (
|
|
<span
|
|
key={qualityCheck}
|
|
className="rounded-full border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-[10px] font-medium text-amber-800 dark:text-amber-200"
|
|
>
|
|
{qualityCheck}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
</div>
|
|
</details>
|
|
) : null}
|
|
</>
|
|
) : formattedJsonBody ? (
|
|
<section className="space-y-1">
|
|
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
|
{t("bodyLabel")}
|
|
</p>
|
|
<pre
|
|
data-testid="agent-output-json-body"
|
|
className="max-h-48 overflow-auto rounded-md border border-border/80 bg-muted/40 p-3 font-mono text-[11px] leading-relaxed text-foreground/95"
|
|
>
|
|
<code>{formattedJsonBody}</code>
|
|
</pre>
|
|
</section>
|
|
) : (
|
|
<section className="space-y-1">
|
|
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
|
{t("bodyLabel")}
|
|
</p>
|
|
<div
|
|
data-testid="agent-output-text-body"
|
|
className="max-h-48 overflow-auto rounded-md border border-border/70 bg-background/70 p-3 text-[13px] leading-relaxed text-foreground/90"
|
|
>
|
|
<p className="whitespace-pre-wrap break-words">{body}</p>
|
|
</div>
|
|
</section>
|
|
)}
|
|
</div>
|
|
</BaseNodeWrapper>
|
|
);
|
|
}
|