feat(agent): localize generated agent workflow
This commit is contained in:
@@ -5,6 +5,8 @@ import { Bot } from "lucide-react";
|
||||
import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
|
||||
import { useAction } from "convex/react";
|
||||
import type { FunctionReference } from "convex/server";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useLocale } from "next-intl";
|
||||
|
||||
import { api } from "@/convex/_generated/api";
|
||||
import type { Id } from "@/convex/_generated/dataModel";
|
||||
@@ -37,6 +39,13 @@ type AgentNodeData = {
|
||||
templateId?: string;
|
||||
canvasId?: string;
|
||||
modelId?: string;
|
||||
briefConstraints?: {
|
||||
briefing?: string;
|
||||
audience?: string;
|
||||
tone?: string;
|
||||
targetChannels?: string[];
|
||||
hardConstraints?: string[];
|
||||
};
|
||||
executionSteps?: Array<{ stepIndex?: number; stepTotal?: number }>;
|
||||
executionStepIndex?: number;
|
||||
executionStepTotal?: number;
|
||||
@@ -48,6 +57,14 @@ type AgentNodeData = {
|
||||
_statusMessage?: string;
|
||||
};
|
||||
|
||||
type AgentBriefConstraints = {
|
||||
briefing: string;
|
||||
audience: string;
|
||||
tone: string;
|
||||
targetChannels: string[];
|
||||
hardConstraints: string[];
|
||||
};
|
||||
|
||||
type AgentNodeType = Node<AgentNodeData, "agent">;
|
||||
|
||||
const DEFAULT_AGENT_TEMPLATE_ID = "campaign-distributor";
|
||||
@@ -114,6 +131,46 @@ function areAnswerMapsEqual(
|
||||
return true;
|
||||
}
|
||||
|
||||
function normalizeDelimitedList(value: string, allowNewLines = false): string[] {
|
||||
const separator = allowNewLines ? /[\n,]/ : /,/;
|
||||
return value
|
||||
.split(separator)
|
||||
.map((item) => item.trim())
|
||||
.filter((item) => item.length > 0);
|
||||
}
|
||||
|
||||
function normalizeBriefConstraints(raw: AgentNodeData["briefConstraints"]): AgentBriefConstraints {
|
||||
return {
|
||||
briefing: typeof raw?.briefing === "string" ? raw.briefing : "",
|
||||
audience: typeof raw?.audience === "string" ? raw.audience : "",
|
||||
tone: typeof raw?.tone === "string" ? raw.tone : "",
|
||||
targetChannels: Array.isArray(raw?.targetChannels)
|
||||
? raw.targetChannels.filter((item): item is string => typeof item === "string")
|
||||
: [],
|
||||
hardConstraints: Array.isArray(raw?.hardConstraints)
|
||||
? raw.hardConstraints.filter((item): item is string => typeof item === "string")
|
||||
: [],
|
||||
};
|
||||
}
|
||||
|
||||
function areStringArraysEqual(left: string[], right: string[]): boolean {
|
||||
if (left.length !== right.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return left.every((value, index) => value === right[index]);
|
||||
}
|
||||
|
||||
function areBriefConstraintsEqual(left: AgentBriefConstraints, right: AgentBriefConstraints): boolean {
|
||||
return (
|
||||
left.briefing === right.briefing &&
|
||||
left.audience === right.audience &&
|
||||
left.tone === right.tone &&
|
||||
areStringArraysEqual(left.targetChannels, right.targetChannels) &&
|
||||
areStringArraysEqual(left.hardConstraints, right.hardConstraints)
|
||||
);
|
||||
}
|
||||
|
||||
function CompactList({ items }: { items: readonly string[] }) {
|
||||
return (
|
||||
<ul className="space-y-1">
|
||||
@@ -127,6 +184,8 @@ function CompactList({ items }: { items: readonly string[] }) {
|
||||
}
|
||||
|
||||
export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeType>) {
|
||||
const t = useTranslations("agentNode");
|
||||
const locale = useLocale();
|
||||
const nodeData = data as AgentNodeData;
|
||||
const template =
|
||||
getAgentTemplate(nodeData.templateId ?? DEFAULT_AGENT_TEMPLATE_ID) ??
|
||||
@@ -140,6 +199,9 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
const [clarificationAnswers, setClarificationAnswers] = useState<AgentClarificationAnswerMap>(
|
||||
normalizeClarificationAnswers(nodeData.clarificationAnswers),
|
||||
);
|
||||
const [briefConstraints, setBriefConstraints] = useState<AgentBriefConstraints>(
|
||||
normalizeBriefConstraints(nodeData.briefConstraints),
|
||||
);
|
||||
|
||||
const agentActionsApi = api as unknown as {
|
||||
agents: {
|
||||
@@ -150,6 +212,7 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
canvasId: Id<"canvases">;
|
||||
nodeId: Id<"nodes">;
|
||||
modelId: string;
|
||||
locale: "de" | "en";
|
||||
},
|
||||
unknown
|
||||
>;
|
||||
@@ -160,6 +223,7 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
canvasId: Id<"canvases">;
|
||||
nodeId: Id<"nodes">;
|
||||
clarificationAnswers: AgentClarificationAnswerMap;
|
||||
locale: "de" | "en";
|
||||
},
|
||||
unknown
|
||||
>;
|
||||
@@ -168,6 +232,7 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
|
||||
const runAgent = useSafeAction(agentActionsApi.agents.runAgent);
|
||||
const resumeAgent = useSafeAction(agentActionsApi.agents.resumeAgent);
|
||||
const normalizedLocale = locale === "en" ? "en" : "de";
|
||||
|
||||
useEffect(() => {
|
||||
setModelId(nodeData.modelId ?? DEFAULT_AGENT_MODEL_ID);
|
||||
@@ -183,6 +248,16 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
});
|
||||
}, [nodeData.clarificationAnswers]);
|
||||
|
||||
useEffect(() => {
|
||||
const normalized = normalizeBriefConstraints(nodeData.briefConstraints);
|
||||
setBriefConstraints((current) => {
|
||||
if (areBriefConstraintsEqual(current, normalized)) {
|
||||
return current;
|
||||
}
|
||||
return normalized;
|
||||
});
|
||||
}, [nodeData.briefConstraints]);
|
||||
|
||||
useEffect(() => {
|
||||
if (availableModels.length === 0) {
|
||||
return;
|
||||
@@ -202,6 +277,14 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
const resolvedModelId = selectedModel?.id ?? DEFAULT_AGENT_MODEL_ID;
|
||||
const creditCost = selectedModel?.creditCost ?? 0;
|
||||
const clarificationQuestions = nodeData.clarificationQuestions ?? [];
|
||||
const templateName =
|
||||
template?.id === "campaign-distributor"
|
||||
? t("templates.campaignDistributor.name")
|
||||
: (template?.name ?? "");
|
||||
const templateDescription =
|
||||
template?.id === "campaign-distributor"
|
||||
? t("templates.campaignDistributor.description")
|
||||
: (template?.description ?? "");
|
||||
const isExecutionActive = nodeData._status === "analyzing" || nodeData._status === "executing";
|
||||
const executionProgressLine = useMemo(() => {
|
||||
if (nodeData._status !== "executing") {
|
||||
@@ -230,14 +313,19 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
stepTotalCandidate > 0;
|
||||
|
||||
if (hasExecutionNumbers) {
|
||||
return `Executing step ${Math.max(0, Math.floor(stepIndexCandidate)) + 1}/${Math.floor(stepTotalCandidate)}`;
|
||||
return t("executingStepFallback", {
|
||||
current: Math.max(0, Math.floor(stepIndexCandidate)) + 1,
|
||||
total: Math.floor(stepTotalCandidate),
|
||||
});
|
||||
}
|
||||
|
||||
if (totalFromSteps > 0) {
|
||||
return `Executing planned outputs (${totalFromSteps} total)`;
|
||||
return t("executingPlannedTotalFallback", {
|
||||
total: totalFromSteps,
|
||||
});
|
||||
}
|
||||
|
||||
return "Executing planned outputs";
|
||||
return t("executingPlannedFallback");
|
||||
}, [
|
||||
nodeData._executionStepIndex,
|
||||
nodeData._executionStepTotal,
|
||||
@@ -246,8 +334,25 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
nodeData.executionStepIndex,
|
||||
nodeData.executionStepTotal,
|
||||
nodeData.executionSteps,
|
||||
t,
|
||||
]);
|
||||
|
||||
const resolveClarificationPrompt = useCallback(
|
||||
(question: AgentClarificationQuestion) => {
|
||||
if (question.id === "briefing") {
|
||||
return t("clarificationPrompts.briefing");
|
||||
}
|
||||
if (question.id === "target-channels") {
|
||||
return t("clarificationPrompts.targetChannels");
|
||||
}
|
||||
if (question.id === "incoming-context") {
|
||||
return t("clarificationPrompts.incomingContext");
|
||||
}
|
||||
return question.prompt;
|
||||
},
|
||||
[t],
|
||||
);
|
||||
|
||||
const persistNodeData = useCallback(
|
||||
(patch: Partial<AgentNodeData>) => {
|
||||
const raw = data as Record<string, unknown>;
|
||||
@@ -288,6 +393,20 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
[persistNodeData],
|
||||
);
|
||||
|
||||
const handleBriefConstraintsChange = useCallback(
|
||||
(patch: Partial<AgentBriefConstraints>) => {
|
||||
setBriefConstraints((prev) => {
|
||||
const next = {
|
||||
...prev,
|
||||
...patch,
|
||||
};
|
||||
void persistNodeData({ briefConstraints: next });
|
||||
return next;
|
||||
});
|
||||
},
|
||||
[persistNodeData],
|
||||
);
|
||||
|
||||
const handleRunAgent = useCallback(async () => {
|
||||
if (isExecutionActive) {
|
||||
return;
|
||||
@@ -295,8 +414,8 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
|
||||
if (status.isOffline) {
|
||||
toast.warning(
|
||||
"Offline aktuell nicht unterstuetzt",
|
||||
"Agent-Lauf benoetigt eine aktive Verbindung.",
|
||||
t("offlineTitle"),
|
||||
t("offlineDescription"),
|
||||
);
|
||||
return;
|
||||
}
|
||||
@@ -310,14 +429,15 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
canvasId,
|
||||
nodeId: id as Id<"nodes">,
|
||||
modelId: resolvedModelId,
|
||||
locale: normalizedLocale,
|
||||
});
|
||||
}, [isExecutionActive, nodeData.canvasId, id, resolvedModelId, runAgent, status.isOffline]);
|
||||
}, [isExecutionActive, nodeData.canvasId, id, normalizedLocale, resolvedModelId, runAgent, status.isOffline, t]);
|
||||
|
||||
const handleSubmitClarification = useCallback(async () => {
|
||||
if (status.isOffline) {
|
||||
toast.warning(
|
||||
"Offline aktuell nicht unterstuetzt",
|
||||
"Agent-Lauf benoetigt eine aktive Verbindung.",
|
||||
t("offlineTitle"),
|
||||
t("offlineDescription"),
|
||||
);
|
||||
return;
|
||||
}
|
||||
@@ -331,8 +451,9 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
canvasId,
|
||||
nodeId: id as Id<"nodes">,
|
||||
clarificationAnswers,
|
||||
locale: normalizedLocale,
|
||||
});
|
||||
}, [clarificationAnswers, nodeData.canvasId, id, resumeAgent, status.isOffline]);
|
||||
}, [clarificationAnswers, nodeData.canvasId, id, normalizedLocale, resumeAgent, status.isOffline, t]);
|
||||
|
||||
if (!template) {
|
||||
return null;
|
||||
@@ -363,14 +484,14 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
<div className="flex items-center gap-1.5 text-xs font-medium text-amber-700 dark:text-amber-300">
|
||||
<Bot className="h-3.5 w-3.5" />
|
||||
<span>{template.emoji}</span>
|
||||
<span>{template.name}</span>
|
||||
<span>{templateName}</span>
|
||||
</div>
|
||||
<p className="line-clamp-2 text-xs text-muted-foreground">{template.description}</p>
|
||||
<p className="line-clamp-2 text-xs text-muted-foreground">{templateDescription}</p>
|
||||
</header>
|
||||
|
||||
<section className="space-y-1.5">
|
||||
<Label htmlFor={`agent-model-${id}`} className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Model
|
||||
{t("modelLabel")}
|
||||
</Label>
|
||||
<Select value={resolvedModelId} onValueChange={handleModelChange}>
|
||||
<SelectTrigger id={`agent-model-${id}`} className="nodrag nowheel w-full" size="sm">
|
||||
@@ -385,10 +506,98 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
{selectedModel?.label ?? resolvedModelId} - {creditCost} Cr
|
||||
{t("modelCreditMeta", {
|
||||
model: selectedModel?.label ?? resolvedModelId,
|
||||
credits: creditCost,
|
||||
})}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="space-y-1.5">
|
||||
<Label htmlFor={`agent-${id}-briefing`} className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
{t("briefingLabel")}
|
||||
</Label>
|
||||
<textarea
|
||||
id={`agent-${id}-briefing`}
|
||||
name="agent-briefing"
|
||||
value={briefConstraints.briefing}
|
||||
onChange={(event) =>
|
||||
handleBriefConstraintsChange({ briefing: event.target.value })
|
||||
}
|
||||
placeholder={t("briefingPlaceholder")}
|
||||
className="nodrag nowheel min-h-20 w-full resize-y rounded-md border border-border bg-background px-2 py-1.5 text-sm"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="space-y-1.5">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
{t("constraintsLabel")}
|
||||
</p>
|
||||
<div className="space-y-1">
|
||||
<label htmlFor={`agent-${id}-audience`} className="text-[11px] text-muted-foreground">
|
||||
{t("audienceLabel")}
|
||||
</label>
|
||||
<input
|
||||
id={`agent-${id}-audience`}
|
||||
name="agent-audience"
|
||||
type="text"
|
||||
value={briefConstraints.audience}
|
||||
onChange={(event) =>
|
||||
handleBriefConstraintsChange({ audience: event.target.value })
|
||||
}
|
||||
className="nodrag nowheel w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label htmlFor={`agent-${id}-tone`} className="text-[11px] text-muted-foreground">
|
||||
{t("toneLabel")}
|
||||
</label>
|
||||
<input
|
||||
id={`agent-${id}-tone`}
|
||||
name="agent-tone"
|
||||
type="text"
|
||||
value={briefConstraints.tone}
|
||||
onChange={(event) => handleBriefConstraintsChange({ tone: event.target.value })}
|
||||
className="nodrag nowheel w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label htmlFor={`agent-${id}-target-channels`} className="text-[11px] text-muted-foreground">
|
||||
{t("targetChannelsLabel")}
|
||||
</label>
|
||||
<input
|
||||
id={`agent-${id}-target-channels`}
|
||||
name="agent-target-channels"
|
||||
type="text"
|
||||
value={briefConstraints.targetChannels.join(", ")}
|
||||
onChange={(event) =>
|
||||
handleBriefConstraintsChange({
|
||||
targetChannels: normalizeDelimitedList(event.target.value),
|
||||
})
|
||||
}
|
||||
placeholder={t("targetChannelsPlaceholder")}
|
||||
className="nodrag nowheel w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label htmlFor={`agent-${id}-hard-constraints`} className="text-[11px] text-muted-foreground">
|
||||
{t("hardConstraintsLabel")}
|
||||
</label>
|
||||
<textarea
|
||||
id={`agent-${id}-hard-constraints`}
|
||||
name="agent-hard-constraints"
|
||||
value={briefConstraints.hardConstraints.join("\n")}
|
||||
onChange={(event) =>
|
||||
handleBriefConstraintsChange({
|
||||
hardConstraints: normalizeDelimitedList(event.target.value, true),
|
||||
})
|
||||
}
|
||||
placeholder={t("hardConstraintsPlaceholder")}
|
||||
className="nodrag nowheel min-h-16 w-full resize-y rounded-md border border-border bg-background px-2 py-1.5 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-1.5">
|
||||
<button
|
||||
type="button"
|
||||
@@ -397,7 +606,7 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
aria-busy={isExecutionActive}
|
||||
className="nodrag w-full rounded-md bg-amber-600 px-3 py-2 text-sm font-medium text-white hover:bg-amber-700 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
Run agent
|
||||
{t("runAgentButton")}
|
||||
</button>
|
||||
{executionProgressLine ? (
|
||||
<p className="text-[11px] text-amber-800/90 dark:text-amber-200/90">{executionProgressLine}</p>
|
||||
@@ -407,7 +616,7 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
{clarificationQuestions.length > 0 ? (
|
||||
<section className="space-y-2">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Clarifications
|
||||
{t("clarificationsLabel")}
|
||||
</p>
|
||||
{clarificationQuestions.map((question) => (
|
||||
<div key={question.id} className="space-y-1">
|
||||
@@ -415,7 +624,7 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
htmlFor={`agent-${id}-clarification-${question.id}`}
|
||||
className="text-[11px] text-foreground/90"
|
||||
>
|
||||
{question.prompt}
|
||||
{resolveClarificationPrompt(question)}
|
||||
{question.required ? " *" : ""}
|
||||
</label>
|
||||
<input
|
||||
@@ -435,31 +644,36 @@ export default function AgentNode({ id, data, selected }: NodeProps<AgentNodeTyp
|
||||
onClick={() => void handleSubmitClarification()}
|
||||
className="nodrag w-full rounded-md border border-amber-500/50 bg-amber-500/10 px-3 py-2 text-sm font-medium text-amber-800 hover:bg-amber-500/20 dark:text-amber-200"
|
||||
>
|
||||
Submit clarification
|
||||
{t("submitClarificationButton")}
|
||||
</button>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
<section className="space-y-1">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Channels
|
||||
</p>
|
||||
<CompactList items={template.channels} />
|
||||
</section>
|
||||
|
||||
<section className="space-y-1">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Expected Inputs
|
||||
</p>
|
||||
<CompactList items={template.expectedInputs} />
|
||||
</section>
|
||||
|
||||
<section className="space-y-1">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Expected Outputs
|
||||
</p>
|
||||
<CompactList items={template.expectedOutputs} />
|
||||
</section>
|
||||
<details className="rounded-md border border-border/60 bg-muted/20 px-2 py-1.5">
|
||||
<summary className="cursor-pointer text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
{t("templateReferenceLabel")}
|
||||
</summary>
|
||||
<div className="mt-2 space-y-2">
|
||||
<section className="space-y-1">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
{t("templateReferenceChannelsLabel")} ({template.channels.length})
|
||||
</p>
|
||||
<CompactList items={template.channels} />
|
||||
</section>
|
||||
<section className="space-y-1">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
{t("templateReferenceInputsLabel")} ({template.expectedInputs.length})
|
||||
</p>
|
||||
<CompactList items={template.expectedInputs} />
|
||||
</section>
|
||||
<section className="space-y-1">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
{t("templateReferenceOutputsLabel")} ({template.expectedOutputs.length})
|
||||
</p>
|
||||
<CompactList items={template.expectedOutputs} />
|
||||
</section>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</BaseNodeWrapper>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import BaseNodeWrapper from "./base-node-wrapper";
|
||||
|
||||
@@ -19,7 +20,28 @@ type AgentOutputNodeData = {
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
export default function AgentOutputNode({ data, selected }: NodeProps<AgentOutputNodeType>) {
|
||||
const t = useTranslations("agentOutputNode");
|
||||
const nodeData = data as AgentOutputNodeData;
|
||||
const isSkeleton = nodeData.isSkeleton === true;
|
||||
const hasStepCounter =
|
||||
@@ -39,7 +61,11 @@ export default function AgentOutputNode({ data, selected }: NodeProps<AgentOutpu
|
||||
const stepCounter = hasStepCounter
|
||||
? `${safeStepIndex + 1}/${safeStepTotal}`
|
||||
: null;
|
||||
const resolvedTitle = nodeData.title ?? (isSkeleton ? "Planned output" : "Agent output");
|
||||
const resolvedTitle =
|
||||
nodeData.title ??
|
||||
(isSkeleton ? t("plannedOutputDefaultTitle") : t("defaultTitle"));
|
||||
const body = nodeData.body ?? "";
|
||||
const formattedJsonBody = isSkeleton ? null : tryFormatJsonBody(body);
|
||||
|
||||
return (
|
||||
<BaseNodeWrapper
|
||||
@@ -63,52 +89,63 @@ export default function AgentOutputNode({ data, selected }: NodeProps<AgentOutpu
|
||||
{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">
|
||||
Skeleton
|
||||
</span>
|
||||
<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}
|
||||
</div>
|
||||
{isSkeleton ? (
|
||||
<p className="text-[11px] text-amber-700/90 dark:text-amber-300/90">
|
||||
Planned output{stepCounter ? ` - ${stepCounter}` : ""}
|
||||
{nodeData.stepId ? ` - ${nodeData.stepId}` : ""}
|
||||
</p>
|
||||
) : null}
|
||||
</header>
|
||||
|
||||
<section className="space-y-1">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Channel
|
||||
</p>
|
||||
<p className="truncate text-xs text-foreground/90" title={nodeData.channel}>
|
||||
{nodeData.channel ?? "-"}
|
||||
</p>
|
||||
<section
|
||||
data-testid="agent-output-meta-strip"
|
||||
className="grid grid-cols-2 gap-2 rounded-md border border-border/70 bg-muted/30 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 ?? "-"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">{t("typeLabel")}</p>
|
||||
<p className="truncate text-xs font-medium text-foreground/90" title={nodeData.outputType}>
|
||||
{nodeData.outputType ?? "-"}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-1">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Output Type
|
||||
</p>
|
||||
<p className="truncate text-xs text-foreground/90" title={nodeData.outputType}>
|
||||
{nodeData.outputType ?? "-"}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="space-y-1">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Body
|
||||
{t("bodyLabel")}
|
||||
</p>
|
||||
{isSkeleton ? (
|
||||
<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">Planned content</p>
|
||||
<p className="text-[11px] text-amber-800/90 dark:text-amber-200/90">{t("plannedContent")}</p>
|
||||
</div>
|
||||
) : formattedJsonBody ? (
|
||||
<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>
|
||||
) : (
|
||||
<p className="line-clamp-6 whitespace-pre-wrap text-xs text-foreground/90">
|
||||
{nodeData.body ?? ""}
|
||||
</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>
|
||||
|
||||
@@ -14,8 +14,12 @@ import { getNodeDataRecord } from "./ai_node_data";
|
||||
import { formatTerminalStatusMessage } from "./ai_errors";
|
||||
import {
|
||||
areClarificationAnswersComplete,
|
||||
buildPreflightClarificationQuestions,
|
||||
normalizeAgentBriefConstraints,
|
||||
normalizeAgentExecutionPlan,
|
||||
normalizeAgentLocale,
|
||||
normalizeAgentOutputDraft,
|
||||
type AgentLocale,
|
||||
type AgentClarificationAnswerMap,
|
||||
type AgentClarificationQuestion,
|
||||
type AgentExecutionStep,
|
||||
@@ -109,6 +113,14 @@ function buildExecuteSchema(stepIds: string[]): Record<string, unknown> {
|
||||
};
|
||||
}
|
||||
|
||||
function getOutputLanguageInstruction(locale: AgentLocale): string {
|
||||
if (locale === "de") {
|
||||
return "Write all generated fields in German (de-DE), including step titles, channel labels, output types, clarification prompts, and body content.";
|
||||
}
|
||||
|
||||
return "Write all generated fields in English (en-US), including step titles, channel labels, output types, clarification prompts, and body content.";
|
||||
}
|
||||
|
||||
type InternalApiShape = {
|
||||
canvasGraph: {
|
||||
getInternal: FunctionReference<
|
||||
@@ -130,6 +142,7 @@ type InternalApiShape = {
|
||||
canvasId: Id<"canvases">;
|
||||
nodeId: Id<"nodes">;
|
||||
modelId: string;
|
||||
locale: AgentLocale;
|
||||
userId: string;
|
||||
reservationId?: Id<"creditTransactions">;
|
||||
shouldDecrementConcurrency: boolean;
|
||||
@@ -143,6 +156,7 @@ type InternalApiShape = {
|
||||
canvasId: Id<"canvases">;
|
||||
nodeId: Id<"nodes">;
|
||||
modelId: string;
|
||||
locale: AgentLocale;
|
||||
userId: string;
|
||||
reservationId?: Id<"creditTransactions">;
|
||||
shouldDecrementConcurrency: boolean;
|
||||
@@ -401,6 +415,13 @@ function collectIncomingContext(
|
||||
return lines.length > 0 ? lines.join("\n") : "No incoming nodes connected to this agent.";
|
||||
}
|
||||
|
||||
function countIncomingContext(
|
||||
graph: { edges: Doc<"edges">[] },
|
||||
agentNodeId: Id<"nodes">,
|
||||
): number {
|
||||
return graph.edges.filter((edge) => edge.targetNodeId === agentNodeId).length;
|
||||
}
|
||||
|
||||
function getAgentNodeFromGraph(
|
||||
graph: { nodes: Doc<"nodes">[] },
|
||||
nodeId: Id<"nodes">,
|
||||
@@ -831,6 +852,7 @@ export const analyzeAgent = internalAction({
|
||||
canvasId: v.id("canvases"),
|
||||
nodeId: v.id("nodes"),
|
||||
modelId: v.string(),
|
||||
locale: v.union(v.literal("de"), v.literal("en")),
|
||||
userId: v.string(),
|
||||
reservationId: v.optional(v.id("creditTransactions")),
|
||||
shouldDecrementConcurrency: v.boolean(),
|
||||
@@ -850,7 +872,27 @@ export const analyzeAgent = internalAction({
|
||||
const agentData = getNodeDataRecord(agentNode.data);
|
||||
const template = getAgentTemplate(trimText(agentData.templateId) || "campaign-distributor");
|
||||
const existingAnswers = normalizeAnswerMap(agentData.clarificationAnswers);
|
||||
const locale = normalizeAgentLocale(args.locale);
|
||||
const briefConstraints = normalizeAgentBriefConstraints(agentData.briefConstraints);
|
||||
const incomingContext = collectIncomingContext(graph, args.nodeId);
|
||||
const incomingContextCount = countIncomingContext(graph, args.nodeId);
|
||||
|
||||
const preflightClarificationQuestions = buildPreflightClarificationQuestions({
|
||||
briefConstraints,
|
||||
incomingContextCount,
|
||||
});
|
||||
const hasPreflightRequiredGaps = !areClarificationAnswersComplete(
|
||||
preflightClarificationQuestions,
|
||||
existingAnswers,
|
||||
);
|
||||
|
||||
if (preflightClarificationQuestions.length > 0 && hasPreflightRequiredGaps) {
|
||||
await ctx.runMutation(internalApi.agents.setAgentClarifying, {
|
||||
nodeId: args.nodeId,
|
||||
clarificationQuestions: preflightClarificationQuestions,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const analysis = await generateStructuredObjectViaOpenRouter<{
|
||||
analysisSummary: string;
|
||||
@@ -864,20 +906,25 @@ export const analyzeAgent = internalAction({
|
||||
{
|
||||
role: "system",
|
||||
content:
|
||||
"You are the LemonSpace Agent Analyzer. Inspect incoming canvas context and decide if clarification is required before execution. Ask only necessary short questions.",
|
||||
[
|
||||
"You are the LemonSpace Agent Analyzer. Inspect incoming canvas context and decide if clarification is required before execution. Ask only necessary short questions.",
|
||||
getOutputLanguageInstruction(locale),
|
||||
].join(" "),
|
||||
},
|
||||
{
|
||||
role: "user",
|
||||
content: [
|
||||
`Template: ${template?.name ?? "Unknown template"}`,
|
||||
`Template description: ${template?.description ?? ""}`,
|
||||
"Incoming node context:",
|
||||
incomingContext,
|
||||
`Current clarification answers: ${JSON.stringify(existingAnswers)}`,
|
||||
"Return structured JSON matching the schema.",
|
||||
].join("\n\n"),
|
||||
},
|
||||
],
|
||||
`Template: ${template?.name ?? "Unknown template"}`,
|
||||
`Template description: ${template?.description ?? ""}`,
|
||||
`Brief + constraints: ${JSON.stringify(briefConstraints)}`,
|
||||
"Incoming node context:",
|
||||
incomingContext,
|
||||
`Incoming context node count: ${incomingContextCount}`,
|
||||
`Current clarification answers: ${JSON.stringify(existingAnswers)}`,
|
||||
"Return structured JSON matching the schema.",
|
||||
].join("\n\n"),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const clarificationQuestions = normalizeClarificationQuestions(
|
||||
@@ -914,6 +961,7 @@ export const analyzeAgent = internalAction({
|
||||
canvasId: args.canvasId,
|
||||
nodeId: args.nodeId,
|
||||
modelId: args.modelId,
|
||||
locale,
|
||||
userId: args.userId,
|
||||
reservationId: args.reservationId,
|
||||
shouldDecrementConcurrency: args.shouldDecrementConcurrency,
|
||||
@@ -934,6 +982,7 @@ export const executeAgent = internalAction({
|
||||
canvasId: v.id("canvases"),
|
||||
nodeId: v.id("nodes"),
|
||||
modelId: v.string(),
|
||||
locale: v.union(v.literal("de"), v.literal("en")),
|
||||
userId: v.string(),
|
||||
reservationId: v.optional(v.id("creditTransactions")),
|
||||
shouldDecrementConcurrency: v.boolean(),
|
||||
@@ -954,6 +1003,8 @@ export const executeAgent = internalAction({
|
||||
const agentData = getNodeDataRecord(agentNode.data);
|
||||
const template = getAgentTemplate(trimText(agentData.templateId) || "campaign-distributor");
|
||||
const clarificationAnswers = normalizeAnswerMap(agentData.clarificationAnswers);
|
||||
const locale = normalizeAgentLocale(args.locale);
|
||||
const briefConstraints = normalizeAgentBriefConstraints(agentData.briefConstraints);
|
||||
const incomingContext = collectIncomingContext(graph, args.nodeId);
|
||||
const executionPlanSummary = trimText(agentData.executionPlanSummary);
|
||||
const executionSteps = normalizeExecutionSteps(agentData.executionSteps);
|
||||
@@ -975,13 +1026,17 @@ export const executeAgent = internalAction({
|
||||
{
|
||||
role: "system",
|
||||
content:
|
||||
"You are the LemonSpace Agent Executor. Produce concrete channel outputs from context and clarification answers. Return one output per step, keyed by stepId.",
|
||||
[
|
||||
"You are the LemonSpace Agent Executor. Produce concrete channel outputs from context and clarification answers. Return one output per step, keyed by stepId.",
|
||||
getOutputLanguageInstruction(locale),
|
||||
].join(" "),
|
||||
},
|
||||
{
|
||||
role: "user",
|
||||
content: [
|
||||
`Template: ${template?.name ?? "Unknown template"}`,
|
||||
`Template description: ${template?.description ?? ""}`,
|
||||
`Brief + constraints: ${JSON.stringify(briefConstraints)}`,
|
||||
`Analyze summary: ${executionPlanSummary}`,
|
||||
`Clarification answers: ${JSON.stringify(clarificationAnswers)}`,
|
||||
`Execution steps: ${JSON.stringify(
|
||||
@@ -1066,6 +1121,7 @@ export const runAgent = action({
|
||||
canvasId: v.id("canvases"),
|
||||
nodeId: v.id("nodes"),
|
||||
modelId: v.string(),
|
||||
locale: v.union(v.literal("de"), v.literal("en")),
|
||||
},
|
||||
handler: async (ctx, args): Promise<{ queued: true; nodeId: Id<"nodes"> }> => {
|
||||
const canvas = await ctx.runQuery(api.canvases.get, {
|
||||
@@ -1126,6 +1182,7 @@ export const runAgent = action({
|
||||
canvasId: args.canvasId,
|
||||
nodeId: args.nodeId,
|
||||
modelId: selectedModel.id,
|
||||
locale: normalizeAgentLocale(args.locale),
|
||||
userId: canvas.ownerId,
|
||||
reservationId: reservationId ?? undefined,
|
||||
shouldDecrementConcurrency: usageIncremented,
|
||||
@@ -1155,6 +1212,7 @@ export const resumeAgent = action({
|
||||
canvasId: v.id("canvases"),
|
||||
nodeId: v.id("nodes"),
|
||||
clarificationAnswers: v.record(v.string(), v.string()),
|
||||
locale: v.union(v.literal("de"), v.literal("en")),
|
||||
},
|
||||
handler: async (ctx, args): Promise<{ queued: true; nodeId: Id<"nodes"> }> => {
|
||||
const canvas = await ctx.runQuery(api.canvases.get, {
|
||||
@@ -1211,6 +1269,7 @@ export const resumeAgent = action({
|
||||
canvasId: args.canvasId,
|
||||
nodeId: args.nodeId,
|
||||
modelId,
|
||||
locale: normalizeAgentLocale(args.locale),
|
||||
userId: canvas.ownerId,
|
||||
reservationId,
|
||||
shouldDecrementConcurrency,
|
||||
|
||||
@@ -25,6 +25,16 @@ export type AgentExecutionPlan = {
|
||||
steps: AgentExecutionStep[];
|
||||
};
|
||||
|
||||
export type AgentBriefConstraints = {
|
||||
briefing: string;
|
||||
audience: string;
|
||||
tone: string;
|
||||
targetChannels: string[];
|
||||
hardConstraints: string[];
|
||||
};
|
||||
|
||||
export type AgentLocale = "de" | "en";
|
||||
|
||||
export type AgentAnalyzeResult = {
|
||||
clarificationQuestions: AgentClarificationQuestion[];
|
||||
executionPlan: AgentExecutionPlan | null;
|
||||
@@ -46,6 +56,102 @@ function normalizeStepId(value: unknown): string {
|
||||
.replace(/\s+/g, "-");
|
||||
}
|
||||
|
||||
function normalizeStringArray(raw: unknown, options?: { lowerCase?: boolean }): string[] {
|
||||
if (!Array.isArray(raw)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const seen = new Set<string>();
|
||||
const normalized: string[] = [];
|
||||
|
||||
for (const item of raw) {
|
||||
const trimmed = trimString(item);
|
||||
if (trimmed === "") {
|
||||
continue;
|
||||
}
|
||||
|
||||
const value = options?.lowerCase ? trimmed.toLowerCase() : trimmed;
|
||||
if (seen.has(value)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
seen.add(value);
|
||||
normalized.push(value);
|
||||
}
|
||||
|
||||
return normalized;
|
||||
}
|
||||
|
||||
export function normalizeAgentBriefConstraints(raw: unknown): AgentBriefConstraints {
|
||||
const rawRecord =
|
||||
raw && typeof raw === "object" && !Array.isArray(raw)
|
||||
? (raw as Record<string, unknown>)
|
||||
: null;
|
||||
|
||||
return {
|
||||
briefing: trimString(rawRecord?.briefing),
|
||||
audience: trimString(rawRecord?.audience),
|
||||
tone: trimString(rawRecord?.tone),
|
||||
targetChannels: normalizeStringArray(rawRecord?.targetChannels, { lowerCase: true }),
|
||||
hardConstraints: normalizeStringArray(rawRecord?.hardConstraints),
|
||||
};
|
||||
}
|
||||
|
||||
export function normalizeAgentLocale(raw: unknown): AgentLocale {
|
||||
if (raw === "de" || raw === "en") {
|
||||
return raw;
|
||||
}
|
||||
return "de";
|
||||
}
|
||||
|
||||
export type PreflightClarificationInput = {
|
||||
briefConstraints: AgentBriefConstraints | unknown;
|
||||
incomingContextCount: number;
|
||||
};
|
||||
|
||||
const BRIEFING_REQUIRED_QUESTION: AgentClarificationQuestion = {
|
||||
id: "briefing",
|
||||
prompt: "What should the agent produce? Provide the brief in one or two sentences.",
|
||||
required: true,
|
||||
};
|
||||
|
||||
const TARGET_CHANNELS_REQUIRED_QUESTION: AgentClarificationQuestion = {
|
||||
id: "target-channels",
|
||||
prompt: "Which channels should this run target? List at least one channel.",
|
||||
required: true,
|
||||
};
|
||||
|
||||
const INCOMING_CONTEXT_REQUIRED_QUESTION: AgentClarificationQuestion = {
|
||||
id: "incoming-context",
|
||||
prompt: "No context was provided. What source context should the agent use?",
|
||||
required: true,
|
||||
};
|
||||
|
||||
export function buildPreflightClarificationQuestions(
|
||||
input: PreflightClarificationInput,
|
||||
): AgentClarificationQuestion[] {
|
||||
const normalizedBriefConstraints = normalizeAgentBriefConstraints(input.briefConstraints);
|
||||
const incomingContextCount = Number.isFinite(input.incomingContextCount)
|
||||
? Math.max(0, Math.trunc(input.incomingContextCount))
|
||||
: 0;
|
||||
|
||||
const questions: AgentClarificationQuestion[] = [];
|
||||
|
||||
if (normalizedBriefConstraints.briefing === "") {
|
||||
questions.push(BRIEFING_REQUIRED_QUESTION);
|
||||
}
|
||||
|
||||
if (normalizedBriefConstraints.targetChannels.length === 0) {
|
||||
questions.push(TARGET_CHANNELS_REQUIRED_QUESTION);
|
||||
}
|
||||
|
||||
if (incomingContextCount === 0) {
|
||||
questions.push(INCOMING_CONTEXT_REQUIRED_QUESTION);
|
||||
}
|
||||
|
||||
return questions;
|
||||
}
|
||||
|
||||
export function normalizeAgentExecutionPlan(raw: unknown): AgentExecutionPlan {
|
||||
const rawRecord =
|
||||
raw && typeof raw === "object" && !Array.isArray(raw)
|
||||
|
||||
@@ -176,6 +176,52 @@
|
||||
"creditMeta": "{credits} Credits",
|
||||
"errorFallback": "Video-Generierung fehlgeschlagen"
|
||||
},
|
||||
"agentNode": {
|
||||
"templates": {
|
||||
"campaignDistributor": {
|
||||
"name": "Campaign Distributor",
|
||||
"description": "Entwickelt und verteilt LemonSpace-Kampagneninhalte kanal- und plattformgerecht."
|
||||
}
|
||||
},
|
||||
"modelLabel": "Modell",
|
||||
"modelCreditMeta": "{model} - {credits} Cr",
|
||||
"briefingLabel": "Briefing",
|
||||
"briefingPlaceholder": "Beschreibe Aufgabe und gewuenschtes Ergebnis kurz und konkret.",
|
||||
"constraintsLabel": "Vorgaben",
|
||||
"audienceLabel": "Zielgruppe",
|
||||
"toneLabel": "Tonfall",
|
||||
"targetChannelsLabel": "Zielkanaele",
|
||||
"targetChannelsPlaceholder": "LinkedIn, Instagram Feed",
|
||||
"hardConstraintsLabel": "Harte Constraints",
|
||||
"hardConstraintsPlaceholder": "Keine Emojis\nMaximal 120 Woerter",
|
||||
"runAgentButton": "Agent starten",
|
||||
"clarificationsLabel": "Rueckfragen",
|
||||
"submitClarificationButton": "Rueckfragen bestaetigen",
|
||||
"templateReferenceLabel": "Template-Referenz",
|
||||
"templateReferenceChannelsLabel": "Kanaele",
|
||||
"templateReferenceInputsLabel": "Inputs",
|
||||
"templateReferenceOutputsLabel": "Outputs",
|
||||
"executingStepFallback": "Schritt {current}/{total} wird ausgefuehrt",
|
||||
"executingPlannedTotalFallback": "Geplante Outputs werden erstellt ({total} gesamt)",
|
||||
"executingPlannedFallback": "Geplante Outputs werden erstellt",
|
||||
"offlineTitle": "Offline derzeit nicht verfuegbar",
|
||||
"offlineDescription": "Ein Agent-Lauf benoetigt eine aktive Verbindung.",
|
||||
"clarificationPrompts": {
|
||||
"briefing": "Was soll der Agent liefern? Bitte formuliere das Briefing in ein bis zwei Saetzen.",
|
||||
"targetChannels": "Welche Kanaele soll dieser Lauf bedienen? Bitte nenne mindestens einen Kanal.",
|
||||
"incomingContext": "Es wurde kein Kontext verbunden. Welche Quelle soll der Agent verwenden?"
|
||||
}
|
||||
},
|
||||
"agentOutputNode": {
|
||||
"defaultTitle": "Agent-Output",
|
||||
"plannedOutputDefaultTitle": "Geplanter Output",
|
||||
"skeletonBadge": "SKELETON",
|
||||
"plannedOutputLabel": "Geplanter Output",
|
||||
"channelLabel": "Kanal",
|
||||
"typeLabel": "Typ",
|
||||
"bodyLabel": "Inhalt",
|
||||
"plannedContent": "Geplanter Inhalt"
|
||||
},
|
||||
"credits": {
|
||||
"balance": "Guthaben",
|
||||
"available": "Verfügbar",
|
||||
|
||||
@@ -176,6 +176,52 @@
|
||||
"creditMeta": "{credits} credits",
|
||||
"errorFallback": "Video generation failed"
|
||||
},
|
||||
"agentNode": {
|
||||
"templates": {
|
||||
"campaignDistributor": {
|
||||
"name": "Campaign Distributor",
|
||||
"description": "Develops and distributes LemonSpace campaign content across social media and messenger channels."
|
||||
}
|
||||
},
|
||||
"modelLabel": "Model",
|
||||
"modelCreditMeta": "{model} - {credits} Cr",
|
||||
"briefingLabel": "Briefing",
|
||||
"briefingPlaceholder": "Describe the core task and desired output.",
|
||||
"constraintsLabel": "Constraints",
|
||||
"audienceLabel": "Audience",
|
||||
"toneLabel": "Tone",
|
||||
"targetChannelsLabel": "Target channels",
|
||||
"targetChannelsPlaceholder": "LinkedIn, Instagram Feed",
|
||||
"hardConstraintsLabel": "Hard constraints",
|
||||
"hardConstraintsPlaceholder": "No emojis\nMax 120 words",
|
||||
"runAgentButton": "Run agent",
|
||||
"clarificationsLabel": "Clarifications",
|
||||
"submitClarificationButton": "Submit clarification",
|
||||
"templateReferenceLabel": "Template reference",
|
||||
"templateReferenceChannelsLabel": "Channels",
|
||||
"templateReferenceInputsLabel": "Inputs",
|
||||
"templateReferenceOutputsLabel": "Outputs",
|
||||
"executingStepFallback": "Executing step {current}/{total}",
|
||||
"executingPlannedTotalFallback": "Executing planned outputs ({total} total)",
|
||||
"executingPlannedFallback": "Executing planned outputs",
|
||||
"offlineTitle": "Offline currently not supported",
|
||||
"offlineDescription": "Agent run requires an active connection.",
|
||||
"clarificationPrompts": {
|
||||
"briefing": "What should the agent produce? Provide the brief in one or two sentences.",
|
||||
"targetChannels": "Which channels should this run target? List at least one channel.",
|
||||
"incomingContext": "No context was provided. What source context should the agent use?"
|
||||
}
|
||||
},
|
||||
"agentOutputNode": {
|
||||
"defaultTitle": "Agent output",
|
||||
"plannedOutputDefaultTitle": "Planned output",
|
||||
"skeletonBadge": "Skeleton",
|
||||
"plannedOutputLabel": "Planned output",
|
||||
"channelLabel": "Channel",
|
||||
"typeLabel": "Type",
|
||||
"bodyLabel": "Body",
|
||||
"plannedContent": "Planned content"
|
||||
},
|
||||
"credits": {
|
||||
"balance": "Balance",
|
||||
"available": "Available",
|
||||
|
||||
@@ -89,6 +89,56 @@ vi.mock("@/components/canvas/nodes/base-node-wrapper", () => ({
|
||||
default: ({ children }: { children: React.ReactNode }) => React.createElement("div", null, children),
|
||||
}));
|
||||
|
||||
const translations: Record<string, string> = {
|
||||
"agentNode.templates.campaignDistributor.name": "Campaign Distributor",
|
||||
"agentNode.templates.campaignDistributor.description":
|
||||
"Develops and distributes LemonSpace campaign content across social media and messenger channels.",
|
||||
"agentNode.modelLabel": "Model",
|
||||
"agentNode.modelCreditMeta": "{model} - {credits} Cr",
|
||||
"agentNode.briefingLabel": "Briefing",
|
||||
"agentNode.briefingPlaceholder": "Describe the core task and desired output.",
|
||||
"agentNode.constraintsLabel": "Constraints",
|
||||
"agentNode.audienceLabel": "Audience",
|
||||
"agentNode.toneLabel": "Tone",
|
||||
"agentNode.targetChannelsLabel": "Target channels",
|
||||
"agentNode.targetChannelsPlaceholder": "LinkedIn, Instagram Feed",
|
||||
"agentNode.hardConstraintsLabel": "Hard constraints",
|
||||
"agentNode.hardConstraintsPlaceholder": "No emojis\nMax 120 words",
|
||||
"agentNode.runAgentButton": "Run agent",
|
||||
"agentNode.clarificationsLabel": "Clarifications",
|
||||
"agentNode.submitClarificationButton": "Submit clarification",
|
||||
"agentNode.templateReferenceLabel": "Template reference",
|
||||
"agentNode.templateReferenceChannelsLabel": "Channels",
|
||||
"agentNode.templateReferenceInputsLabel": "Inputs",
|
||||
"agentNode.templateReferenceOutputsLabel": "Outputs",
|
||||
"agentNode.executingStepFallback": "Executing step {current}/{total}",
|
||||
"agentNode.executingPlannedTotalFallback": "Executing planned outputs ({total} total)",
|
||||
"agentNode.executingPlannedFallback": "Executing planned outputs",
|
||||
"agentNode.offlineTitle": "Offline currently not supported",
|
||||
"agentNode.offlineDescription": "Agent run requires an active connection.",
|
||||
"agentNode.clarificationPrompts.briefing":
|
||||
"What should the agent produce? Provide the brief in one or two sentences.",
|
||||
"agentNode.clarificationPrompts.targetChannels":
|
||||
"Which channels should this run target? List at least one channel.",
|
||||
"agentNode.clarificationPrompts.incomingContext":
|
||||
"No context was provided. What source context should the agent use?",
|
||||
};
|
||||
|
||||
vi.mock("next-intl", () => ({
|
||||
useLocale: () => "de",
|
||||
useTranslations: (namespace?: string) =>
|
||||
(key: string, values?: Record<string, unknown>) => {
|
||||
const fullKey = namespace ? `${namespace}.${key}` : key;
|
||||
let text = translations[fullKey] ?? key;
|
||||
if (values) {
|
||||
for (const [name, value] of Object.entries(values)) {
|
||||
text = text.replaceAll(`{${name}}`, String(value));
|
||||
}
|
||||
}
|
||||
return text;
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock("@xyflow/react", () => ({
|
||||
Handle: () => null,
|
||||
Position: { Left: "left", Right: "right" },
|
||||
@@ -143,8 +193,15 @@ describe("AgentNode runtime", () => {
|
||||
canvasId: "canvas-1",
|
||||
templateId: "campaign-distributor",
|
||||
modelId: "openai/gpt-5.4-mini",
|
||||
briefConstraints: {
|
||||
briefing: "Draft channel-ready campaign copy",
|
||||
audience: "SaaS founders",
|
||||
tone: "Confident and practical",
|
||||
targetChannels: ["LinkedIn", "Instagram Feed"],
|
||||
hardConstraints: ["No emojis", "Max 120 words"],
|
||||
},
|
||||
clarificationQuestions: [
|
||||
{ id: "audience", prompt: "Target audience?", required: true },
|
||||
{ id: "briefing", prompt: "RAW_BRIEFING_PROMPT", required: true },
|
||||
],
|
||||
clarificationAnswers: {},
|
||||
} as Record<string, unknown>,
|
||||
@@ -167,9 +224,27 @@ describe("AgentNode runtime", () => {
|
||||
|
||||
expect(container.textContent).toContain("GPT-5.4 Mini");
|
||||
expect(container.textContent).toContain("15 Cr");
|
||||
expect(container.textContent).toContain("Channels");
|
||||
expect(container.textContent).toContain("Expected Inputs");
|
||||
expect(container.textContent).toContain("Expected Outputs");
|
||||
expect(container.textContent).toContain("Briefing");
|
||||
expect(container.textContent).toContain("Constraints");
|
||||
expect(container.textContent).toContain("Template reference");
|
||||
|
||||
const briefingTextarea = container.querySelector('textarea[name="agent-briefing"]');
|
||||
if (!(briefingTextarea instanceof HTMLTextAreaElement)) {
|
||||
throw new Error("Briefing textarea not found");
|
||||
}
|
||||
expect(briefingTextarea.value).toBe("Draft channel-ready campaign copy");
|
||||
|
||||
const targetChannelsInput = container.querySelector('input[name="agent-target-channels"]');
|
||||
if (!(targetChannelsInput instanceof HTMLInputElement)) {
|
||||
throw new Error("Target channels input not found");
|
||||
}
|
||||
expect(targetChannelsInput.value).toBe("LinkedIn, Instagram Feed");
|
||||
|
||||
const hardConstraintsInput = container.querySelector('textarea[name="agent-hard-constraints"]');
|
||||
if (!(hardConstraintsInput instanceof HTMLTextAreaElement)) {
|
||||
throw new Error("Hard constraints textarea not found");
|
||||
}
|
||||
expect(hardConstraintsInput.value).toBe("No emojis\nMax 120 words");
|
||||
|
||||
await act(async () => {
|
||||
modelSelect.value = "openai/gpt-5.4";
|
||||
@@ -183,7 +258,71 @@ describe("AgentNode runtime", () => {
|
||||
}),
|
||||
);
|
||||
|
||||
const clarificationInput = container.querySelector('input[name="clarification-audience"]');
|
||||
await act(async () => {
|
||||
const valueSetter = Object.getOwnPropertyDescriptor(
|
||||
HTMLTextAreaElement.prototype,
|
||||
"value",
|
||||
)?.set;
|
||||
valueSetter?.call(briefingTextarea, "Adapt this launch to each channel");
|
||||
briefingTextarea.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
});
|
||||
|
||||
expect(mocks.queueNodeDataUpdate).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
nodeId: "agent-1",
|
||||
data: expect.objectContaining({
|
||||
briefConstraints: expect.objectContaining({
|
||||
briefing: "Adapt this launch to each channel",
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
const valueSetter = Object.getOwnPropertyDescriptor(
|
||||
HTMLInputElement.prototype,
|
||||
"value",
|
||||
)?.set;
|
||||
valueSetter?.call(targetChannelsInput, "LinkedIn, X, TikTok");
|
||||
targetChannelsInput.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
});
|
||||
|
||||
expect(mocks.queueNodeDataUpdate).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
nodeId: "agent-1",
|
||||
data: expect.objectContaining({
|
||||
briefConstraints: expect.objectContaining({
|
||||
targetChannels: ["LinkedIn", "X", "TikTok"],
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
const valueSetter = Object.getOwnPropertyDescriptor(
|
||||
HTMLTextAreaElement.prototype,
|
||||
"value",
|
||||
)?.set;
|
||||
valueSetter?.call(hardConstraintsInput, "No emojis\nMax 80 words, include CTA");
|
||||
hardConstraintsInput.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
});
|
||||
|
||||
expect(mocks.queueNodeDataUpdate).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
nodeId: "agent-1",
|
||||
data: expect.objectContaining({
|
||||
briefConstraints: expect.objectContaining({
|
||||
hardConstraints: ["No emojis", "Max 80 words", "include CTA"],
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
);
|
||||
|
||||
expect(container.textContent).toContain(
|
||||
"What should the agent produce? Provide the brief in one or two sentences.",
|
||||
);
|
||||
|
||||
const clarificationInput = container.querySelector('input[name="clarification-briefing"]');
|
||||
if (!(clarificationInput instanceof HTMLInputElement)) {
|
||||
throw new Error("Clarification input not found");
|
||||
}
|
||||
@@ -201,7 +340,7 @@ describe("AgentNode runtime", () => {
|
||||
expect.objectContaining({
|
||||
nodeId: "agent-1",
|
||||
data: expect.objectContaining({
|
||||
clarificationAnswers: expect.objectContaining({ audience: "SaaS founders" }),
|
||||
clarificationAnswers: expect.objectContaining({ briefing: "SaaS founders" }),
|
||||
}),
|
||||
}),
|
||||
);
|
||||
@@ -221,6 +360,7 @@ describe("AgentNode runtime", () => {
|
||||
canvasId: "canvas-1",
|
||||
nodeId: "agent-1",
|
||||
modelId: "openai/gpt-5.4",
|
||||
locale: "de",
|
||||
});
|
||||
|
||||
const submitButton = Array.from(container.querySelectorAll("button")).find((element) =>
|
||||
@@ -237,7 +377,8 @@ describe("AgentNode runtime", () => {
|
||||
expect(mocks.resumeAgent).toHaveBeenCalledWith({
|
||||
canvasId: "canvas-1",
|
||||
nodeId: "agent-1",
|
||||
clarificationAnswers: { audience: "SaaS founders" },
|
||||
clarificationAnswers: { briefing: "SaaS founders" },
|
||||
locale: "de",
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -22,6 +22,45 @@ vi.mock("@xyflow/react", () => ({
|
||||
Position: { Left: "left", Right: "right" },
|
||||
}));
|
||||
|
||||
const translations: Record<string, string> = {
|
||||
"agentNode.templates.campaignDistributor.name": "Campaign Distributor",
|
||||
"agentNode.templates.campaignDistributor.description":
|
||||
"Develops and distributes LemonSpace campaign content across social media and messenger channels.",
|
||||
"agentNode.modelLabel": "Model",
|
||||
"agentNode.modelCreditMeta": "{model} - {credits} Cr",
|
||||
"agentNode.briefingLabel": "Briefing",
|
||||
"agentNode.briefingPlaceholder": "Describe the core task and desired output.",
|
||||
"agentNode.constraintsLabel": "Constraints",
|
||||
"agentNode.audienceLabel": "Audience",
|
||||
"agentNode.toneLabel": "Tone",
|
||||
"agentNode.targetChannelsLabel": "Target channels",
|
||||
"agentNode.targetChannelsPlaceholder": "LinkedIn, Instagram Feed",
|
||||
"agentNode.hardConstraintsLabel": "Hard constraints",
|
||||
"agentNode.hardConstraintsPlaceholder": "No emojis\nMax 120 words",
|
||||
"agentNode.runAgentButton": "Run agent",
|
||||
"agentNode.clarificationsLabel": "Clarifications",
|
||||
"agentNode.submitClarificationButton": "Submit clarification",
|
||||
"agentNode.templateReferenceLabel": "Template reference",
|
||||
"agentNode.templateReferenceChannelsLabel": "Channels",
|
||||
"agentNode.templateReferenceInputsLabel": "Inputs",
|
||||
"agentNode.templateReferenceOutputsLabel": "Outputs",
|
||||
};
|
||||
|
||||
vi.mock("next-intl", () => ({
|
||||
useLocale: () => "de",
|
||||
useTranslations: (namespace?: string) =>
|
||||
(key: string, values?: Record<string, unknown>) => {
|
||||
const fullKey = namespace ? `${namespace}.${key}` : key;
|
||||
let text = translations[fullKey] ?? key;
|
||||
if (values) {
|
||||
for (const [name, value] of Object.entries(values)) {
|
||||
text = text.replaceAll(`{${name}}`, String(value));
|
||||
}
|
||||
}
|
||||
return text;
|
||||
},
|
||||
}));
|
||||
|
||||
import AgentNode from "@/components/canvas/nodes/agent-node";
|
||||
|
||||
(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
||||
@@ -73,8 +112,9 @@ describe("AgentNode", () => {
|
||||
});
|
||||
|
||||
expect(container.textContent).toContain("Campaign Distributor");
|
||||
expect(container.textContent).toContain("Instagram Feed");
|
||||
expect(container.textContent).toContain("Caption-Pakete");
|
||||
expect(container.textContent).toContain("Briefing");
|
||||
expect(container.textContent).toContain("Constraints");
|
||||
expect(container.textContent).toContain("Template reference");
|
||||
expect(handleCalls.filter((call) => call.type === "target")).toHaveLength(1);
|
||||
expect(handleCalls.filter((call) => call.type === "source")).toHaveLength(1);
|
||||
});
|
||||
|
||||
@@ -22,6 +22,31 @@ vi.mock("@xyflow/react", () => ({
|
||||
Position: { Left: "left", Right: "right" },
|
||||
}));
|
||||
|
||||
const translations: Record<string, string> = {
|
||||
"agentOutputNode.defaultTitle": "Agent output",
|
||||
"agentOutputNode.plannedOutputDefaultTitle": "Planned output",
|
||||
"agentOutputNode.skeletonBadge": "Skeleton",
|
||||
"agentOutputNode.plannedOutputLabel": "Planned output",
|
||||
"agentOutputNode.channelLabel": "Channel",
|
||||
"agentOutputNode.typeLabel": "Type",
|
||||
"agentOutputNode.bodyLabel": "Body",
|
||||
"agentOutputNode.plannedContent": "Planned content",
|
||||
};
|
||||
|
||||
vi.mock("next-intl", () => ({
|
||||
useTranslations: (namespace?: string) =>
|
||||
(key: string, values?: Record<string, unknown>) => {
|
||||
const fullKey = namespace ? `${namespace}.${key}` : key;
|
||||
let text = translations[fullKey] ?? key;
|
||||
if (values) {
|
||||
for (const [name, value] of Object.entries(values)) {
|
||||
text = text.replaceAll(`{${name}}`, String(value));
|
||||
}
|
||||
}
|
||||
return text;
|
||||
},
|
||||
}));
|
||||
|
||||
import AgentOutputNode from "@/components/canvas/nodes/agent-output-node";
|
||||
|
||||
(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
||||
@@ -79,6 +104,45 @@ describe("AgentOutputNode", () => {
|
||||
expect(container.textContent).toContain("instagram-feed");
|
||||
expect(container.textContent).toContain("caption");
|
||||
expect(container.textContent).toContain("A short punchy caption with hashtags");
|
||||
expect(container.querySelector('[data-testid="agent-output-meta-strip"]')).not.toBeNull();
|
||||
expect(container.querySelector('[data-testid="agent-output-text-body"]')).not.toBeNull();
|
||||
});
|
||||
|
||||
it("renders parseable json body in a pretty-printed code block", async () => {
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
|
||||
await act(async () => {
|
||||
root?.render(
|
||||
React.createElement(AgentOutputNode, {
|
||||
id: "agent-output-4",
|
||||
selected: false,
|
||||
dragging: false,
|
||||
draggable: true,
|
||||
selectable: true,
|
||||
deletable: true,
|
||||
zIndex: 1,
|
||||
isConnectable: true,
|
||||
type: "agent-output",
|
||||
data: {
|
||||
title: "JSON output",
|
||||
channel: "api",
|
||||
outputType: "payload",
|
||||
body: '{"post":"Hello","tags":["launch","news"]}',
|
||||
_status: "done",
|
||||
} as Record<string, unknown>,
|
||||
positionAbsoluteX: 0,
|
||||
positionAbsoluteY: 0,
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
const jsonBody = container.querySelector('[data-testid="agent-output-json-body"]');
|
||||
expect(jsonBody).not.toBeNull();
|
||||
expect(jsonBody?.textContent).toContain('"post": "Hello"');
|
||||
expect(jsonBody?.textContent).toContain('"tags": [');
|
||||
expect(container.querySelector('[data-testid="agent-output-text-body"]')).toBeNull();
|
||||
});
|
||||
|
||||
it("renders input-only handle agent-output-in", async () => {
|
||||
|
||||
@@ -2,10 +2,14 @@ import { describe, expect, it } from "vitest";
|
||||
|
||||
import {
|
||||
areClarificationAnswersComplete,
|
||||
buildPreflightClarificationQuestions,
|
||||
normalizeAgentLocale,
|
||||
normalizeAgentExecutionPlan,
|
||||
normalizeAgentBriefConstraints,
|
||||
normalizeAgentOutputDraft,
|
||||
type AgentClarificationAnswerMap,
|
||||
type AgentClarificationQuestion,
|
||||
type AgentBriefConstraints,
|
||||
type AgentExecutionPlan,
|
||||
} from "@/lib/agent-run-contract";
|
||||
|
||||
@@ -178,4 +182,108 @@ describe("agent run contract helpers", () => {
|
||||
expect(normalized.steps.map((step) => step.id)).toEqual(["step", "step-2", "step-3"]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("normalizeAgentBriefConstraints", () => {
|
||||
it("trims fields and normalizes target channels", () => {
|
||||
const normalized = normalizeAgentBriefConstraints({
|
||||
briefing: " Build a launch sequence ",
|
||||
audience: " SaaS founders ",
|
||||
tone: " concise ",
|
||||
targetChannels: [" Email ", "", "LinkedIn", "email", " "],
|
||||
hardConstraints: [
|
||||
" Do not mention pricing ",
|
||||
"",
|
||||
"Keep under 120 words",
|
||||
"Keep under 120 words",
|
||||
],
|
||||
});
|
||||
|
||||
expect(normalized).toEqual<AgentBriefConstraints>({
|
||||
briefing: "Build a launch sequence",
|
||||
audience: "SaaS founders",
|
||||
tone: "concise",
|
||||
targetChannels: ["email", "linkedin"],
|
||||
hardConstraints: ["Do not mention pricing", "Keep under 120 words"],
|
||||
});
|
||||
});
|
||||
|
||||
it("falls back to safe empty values for invalid payloads", () => {
|
||||
const normalized = normalizeAgentBriefConstraints({
|
||||
briefing: null,
|
||||
audience: undefined,
|
||||
tone: 3,
|
||||
targetChannels: [" ", null, 1],
|
||||
hardConstraints: "must be array",
|
||||
});
|
||||
|
||||
expect(normalized).toEqual<AgentBriefConstraints>({
|
||||
briefing: "",
|
||||
audience: "",
|
||||
tone: "",
|
||||
targetChannels: [],
|
||||
hardConstraints: [],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("buildPreflightClarificationQuestions", () => {
|
||||
it("builds deterministic required questions for missing preflight requirements", () => {
|
||||
const questions = buildPreflightClarificationQuestions({
|
||||
briefConstraints: {
|
||||
briefing: "",
|
||||
audience: "Founders",
|
||||
tone: "confident",
|
||||
targetChannels: [],
|
||||
hardConstraints: [],
|
||||
},
|
||||
incomingContextCount: 0,
|
||||
});
|
||||
|
||||
expect(questions).toEqual<AgentClarificationQuestion[]>([
|
||||
{
|
||||
id: "briefing",
|
||||
prompt: "What should the agent produce? Provide the brief in one or two sentences.",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
id: "target-channels",
|
||||
prompt: "Which channels should this run target? List at least one channel.",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
id: "incoming-context",
|
||||
prompt: "No context was provided. What source context should the agent use?",
|
||||
required: true,
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
it("returns an empty list when all preflight requirements are satisfied", () => {
|
||||
const questions = buildPreflightClarificationQuestions({
|
||||
briefConstraints: {
|
||||
briefing: "Create 3 posts",
|
||||
audience: "Marketers",
|
||||
tone: "friendly",
|
||||
targetChannels: ["x"],
|
||||
hardConstraints: ["No emojis"],
|
||||
},
|
||||
incomingContextCount: 2,
|
||||
});
|
||||
|
||||
expect(questions).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("normalizeAgentLocale", () => {
|
||||
it("returns supported locale values", () => {
|
||||
expect(normalizeAgentLocale("de")).toBe("de");
|
||||
expect(normalizeAgentLocale("en")).toBe("en");
|
||||
});
|
||||
|
||||
it("falls back to de for unsupported values", () => {
|
||||
expect(normalizeAgentLocale("fr")).toBe("de");
|
||||
expect(normalizeAgentLocale(undefined)).toBe("de");
|
||||
expect(normalizeAgentLocale(null)).toBe("de");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user