apunkt/dograh
1
0
Fork 0
mirror of https://github.com/dograh-hq/dograh.git synced 2026-06-16 08:25:18 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: add qa node in workflow builder (#172)

Browse source 
* feat: add qa node in workflow builder

* feat: add qa analysis token usage in usage_info

* fix: mask the API key in QA node

* feat: add advanced configuration in QA node
This commit is contained in:
Abhishek 2026-02-25 13:53:30 +05:30 • committed by GitHub
parent f1f4830012
commit a836825b83
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
30 changed files with 1619 additions and 265 deletions
Download patch file Download diff file Expand all files Collapse all files

88
ui/src/app/superadmin/runs/page.tsx
View file

@ -1,25 +1,16 @@
"use client";
import { AlertTriangle, ArrowDown, ArrowUp, ArrowUpDown, CheckCircle, ChevronLeft, ChevronRight, ExternalLink, Info, Loader2, MessageSquare, RefreshCw } from 'lucide-react';
import { AlertTriangle, ArrowDown, ArrowUp, ArrowUpDown, CheckCircle, ChevronLeft, ChevronRight, ExternalLink, Info, Loader2, RefreshCw } from 'lucide-react';
import Image from 'next/image';
import { useRouter, useSearchParams } from 'next/navigation';
import { useCallback, useEffect, useState } from "react";
import { getWorkflowRunsApiV1SuperuserWorkflowRunsGet, setAdminCommentApiV1SuperuserWorkflowRunsRunIdCommentPost } from '@/client/sdk.gen';
import { getWorkflowRunsApiV1SuperuserWorkflowRunsGet } from '@/client/sdk.gen';
import { FilterBuilder } from "@/components/filters/FilterBuilder";
import { MediaPreviewButton, MediaPreviewDialog } from '@/components/MediaPreviewDialog';
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import {
Table,
TableBody,
@ -28,7 +19,6 @@ import {
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Textarea } from '@/components/ui/textarea';
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { useAuth } from '@/lib/auth';
import{ superadminFilterAttributes } from "@/lib/filterAttributes";
@ -52,7 +42,6 @@ interface WorkflowRun {
cost_info?: Record<string, unknown>;
initial_context?: Record<string, unknown>;
gathered_context?: Record<string, unknown>;
admin_comment?: string;
created_at: string;
}
@ -101,10 +90,6 @@ export default function RunsPage() {
return order === 'asc' ? 'asc' : 'desc';
});
// Dialog state for comment editing
const [isCommentDialogOpen, setIsCommentDialogOpen] = useState(false);
const [commentRunId, setCommentRunId] = useState<number | null>(null);
const [commentText, setCommentText] = useState('');
const [selectedRowId, setSelectedRowId] = useState<number | null>(null);
const auth = useAuth();
@ -257,29 +242,6 @@ export default function RunsPage() {
updatePageInUrl(1, appliedFilters, newSortBy, newSortOrder);
}, [sortBy, sortOrder, updatePageInUrl, appliedFilters]);
// Save comment function declared outside JSX (requirement #2)
const saveAdminComment = useCallback(async () => {
if (commentRunId === null || !auth.isAuthenticated) return;
try {
await setAdminCommentApiV1SuperuserWorkflowRunsRunIdCommentPost({
path: {
run_id: commentRunId,
},
body: {
admin_comment: commentText,
},
});
// Optimistically update UI
setRuns(prev => prev.map(r => r.id === commentRunId ? { ...r, admin_comment: commentText } : r));
setIsCommentDialogOpen(false);
} catch (err) {
console.error('Failed to set admin comment', err);
alert('Failed to save comment. Please try again.');
}
}, [commentRunId, commentText, auth.isAuthenticated]);
/**
* ----------------------------------------------------------------------------------
* Helpers
@ -388,7 +350,6 @@ export default function RunsPage() {
<TableHead className="font-semibold">Status</TableHead>
<TableHead className="font-semibold">Disposition</TableHead>
<TableHead className="font-semibold">Tags</TableHead>
<TableHead className="font-semibold">Comment</TableHead>
<TableHead
className="font-semibold cursor-pointer hover:bg-muted/50 select-none"
onClick={() => handleSort('duration')}
@ -472,13 +433,6 @@ export default function RunsPage() {
<span className="text-sm text-muted-foreground">-</span>
)}
</TableCell>
<TableCell className="max-w-sm whitespace-pre-wrap break-words">
{run.admin_comment ? (
<span>{run.admin_comment}</span>
) : (
<span className="text-muted-foreground/70 italic">No comment</span>
)}
</TableCell>
<TableCell className="text-sm whitespace-pre-wrap break-words">
<span className={!run.is_completed ? "font-semibold text-blue-600" : ""}>
{calculateDuration(run.is_completed, run.usage_info)}
@ -590,18 +544,6 @@ export default function RunsPage() {
<ExternalLink className="h-4 w-4" />
</Button>
<Button
variant="outline"
size="icon"
onClick={() => {
setCommentRunId(run.id);
setCommentText(run.admin_comment || '');
setIsCommentDialogOpen(true);
}}
title="Add/Edit Comment"
>
<MessageSquare className="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
@ -670,32 +612,6 @@ export default function RunsPage() {
</CardContent>
</Card>
{/* Comment Dialog */}
<Dialog open={isCommentDialogOpen} onOpenChange={setIsCommentDialogOpen}>
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle>{commentRunId ? 'Edit Comment' : 'Add Comment'}</DialogTitle>
<DialogDescription>
Admin-only comment for run #{commentRunId}
</DialogDescription>
</DialogHeader>
<Textarea
value={commentText}
onChange={(e) => setCommentText(e.target.value)}
placeholder="Enter comment here..."
className="min-h-[120px]"
/>
<DialogFooter className="pt-4">
<DialogClose asChild>
<Button variant="secondary">Cancel</Button>
</DialogClose>
<Button onClick={saveAdminComment}>Save</Button>
</DialogFooter>
</DialogContent>
</Dialog>
{/* Media Preview Dialog */}
{mediaPreview.dialog}

3
ui/src/app/workflow/[workflowId]/RenderWorkflow.tsx
View file

@ -18,7 +18,7 @@ import { WorkflowConfigurations } from '@/types/workflow-configurations';
import AddNodePanel from "../../../components/flow/AddNodePanel";
import CustomEdge from "../../../components/flow/edges/CustomEdge";
import { AgentNode, EndCall, GlobalNode, StartCall, TriggerNode, WebhookNode } from "../../../components/flow/nodes";
import { AgentNode, EndCall, GlobalNode, QANode, StartCall, TriggerNode, WebhookNode } from "../../../components/flow/nodes";
import { ConfigurationsDialog } from './components/ConfigurationsDialog';
import { DictionaryDialog } from './components/DictionaryDialog';
import { EmbedDialog } from './components/EmbedDialog';
@ -37,6 +37,7 @@ const nodeTypes = {
[NodeType.GLOBAL_NODE]: GlobalNode,
[NodeType.TRIGGER]: TriggerNode,
[NodeType.WEBHOOK]: WebhookNode,
[NodeType.QA]: QANode,
};
const edgeTypes = {

53
ui/src/app/workflow/[workflowId]/hooks/useWorkflowState.ts
View file

@ -22,6 +22,45 @@ import logger from '@/lib/logger';
import { getNextNodeId, getRandomId } from "@/lib/utils";
import { DEFAULT_WORKFLOW_CONFIGURATIONS, WorkflowConfigurations } from "@/types/workflow-configurations";
const DEFAULT_QA_SYSTEM_PROMPT = `You are a QA expert analyzing voice AI call transcripts. Analyze the conversation and return a structured JSON assessment.
## Tags to evaluate
Examine the conversation carefully and identify which of the following tags apply:
- UNCLEAR_CONVERSATION - The conversation is not coherent or clear, messages don't connect logically
- ASSISTANT_IN_LOOP - The assistant asks the same question multiple times or gets stuck repeating itself
- ASSISTANT_REPLY_IMPROPER - The assistant did not reply properly to the user's question/query or seems confused by what the user said
- USER_FRUSTRATED - The user seems angry, frustrated, or is complaining about something in the call
- USER_NOT_UNDERSTANDING - The user explicitly says they don't understand or repeatedly asks for clarification
- HEARING_ISSUES - Either party can't hear the other ("hello?", "are you there?", "can you hear me?")
- DEAD_AIR - Unusually long silences in the conversation (use the timestamps to judge)
- USER_REQUESTING_FEATURE - The user asks for something the assistant can't fulfill
- ASSISTANT_LACKS_EMPATHY - The assistant ignores the user's personal situation or emotional state and continues pitching or pushing the agenda.
- USER_DETECTS_AI - The user suspects or identifies that they are talking to an AI/robot/bot rather than a real human.
## Call metrics (pre-computed)
Use these alongside the transcript for your analysis:
{metrics}
## Output format
Return ONLY a valid JSON object (no markdown):
{
"tags": [
{
"tag": "TAG_NAME",
"reason": "Short reason with evidence from the transcript"
}
],
"overall_sentiment": "positive|neutral|negative",
"call_quality_score": <1-10>,
"summary": "1-2 sentence summary of the call"
}
If no tags apply, return an empty tags list. Always provide sentiment, score, and summary.`;
export function getDefaultAllowInterrupt(type: string = NodeType.START_CALL): boolean {
switch (type) {
case NodeType.AGENT_NODE:
@ -62,6 +101,7 @@ const getNewNode = (type: string, position: { x: number, y: number }, existingNo
[NodeType.START_CALL]: "Start Call",
[NodeType.END_CALL]: "End Call",
[NodeType.WEBHOOK]: "Webhook",
[NodeType.QA]: "QA Analysis",
}[type] || "",
allow_interrupt: getDefaultAllowInterrupt(type),
},
@ -89,6 +129,19 @@ const getNewNode = (type: string, position: { x: number, y: number }, existingNo
};
}
// Add QA-specific defaults
if (type === NodeType.QA) {
return {
...baseNode,
data: {
...baseNode.data,
qa_enabled: true,
qa_model: "default",
qa_system_prompt: DEFAULT_QA_SYSTEM_PROMPT,
},
};
}
return baseNode;
};

208
ui/src/components/LLMConfigSelector.tsx Normal file
View file

@ -0,0 +1,208 @@
"use client";
import { useEffect, useState } from "react";
import { getDefaultConfigurationsApiV1UserConfigurationsDefaultsGet } from "@/client/sdk.gen";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
interface SchemaProperty {
type?: string;
default?: string | number | boolean;
enum?: string[];
examples?: string[];
$ref?: string;
}
interface ProviderSchema {
properties: Record<string, SchemaProperty>;
required?: string[];
$defs?: Record<string, SchemaProperty>;
}
interface LLMConfigSelectorProps {
provider: string;
onProviderChange: (provider: string) => void;
model: string;
onModelChange: (model: string) => void;
apiKey: string;
onApiKeyChange: (apiKey: string) => void;
}
export function LLMConfigSelector({
provider,
onProviderChange,
model,
onModelChange,
apiKey,
onApiKeyChange,
}: LLMConfigSelectorProps) {
const [schemas, setSchemas] = useState<Record<string, ProviderSchema>>({});
const [isManualModelInput, setIsManualModelInput] = useState(false);
useEffect(() => {
const fetchSchemas = async () => {
const response =
await getDefaultConfigurationsApiV1UserConfigurationsDefaultsGet();
if (response.data?.llm) {
setSchemas(response.data.llm as unknown as Record<string, ProviderSchema>);
}
};
fetchSchemas();
}, []);
const availableProviders = Object.keys(schemas);
const providerSchema = schemas[provider];
const getModelOptions = (): string[] => {
if (!providerSchema) return [];
const modelSchema = providerSchema.properties.model;
const actualSchema =
modelSchema?.$ref && providerSchema.$defs
? providerSchema.$defs[modelSchema.$ref.split("/").pop() || ""]
: modelSchema;
return actualSchema?.examples || [];
};
const modelOptions = getModelOptions();
// Check if current model is not in options (custom model)
useEffect(() => {
if (model && modelOptions.length > 0 && !modelOptions.includes(model)) {
setIsManualModelInput(true);
}
}, [model, modelOptions]);
const handleProviderChange = (newProvider: string) => {
if (!newProvider) return;
onProviderChange(newProvider);
const newSchema = schemas[newProvider];
if (newSchema?.properties?.model) {
const modelSchema = newSchema.properties.model;
const actualSchema =
modelSchema.$ref && newSchema.$defs
? newSchema.$defs[modelSchema.$ref.split("/").pop() || ""]
: modelSchema;
const defaultModel =
(actualSchema?.default as string) ||
actualSchema?.examples?.[0] ||
"";
onModelChange(defaultModel);
}
setIsManualModelInput(false);
};
return (
<div className="space-y-4 p-3 border rounded-md bg-muted/10">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label>Provider</Label>
<Select value={provider} onValueChange={handleProviderChange}>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select provider" />
</SelectTrigger>
<SelectContent>
{availableProviders.map((p) => (
<SelectItem key={p} value={p}>
{p}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label>Model</Label>
{isManualModelInput ? (
<div className="space-y-2">
<Input
type="text"
placeholder="Enter model name"
value={model}
onChange={(e) => onModelChange(e.target.value)}
/>
<div className="flex items-center space-x-2">
<Checkbox
id="qa-manual-model"
checked={isManualModelInput}
onCheckedChange={(checked) => {
setIsManualModelInput(checked as boolean);
if (!checked && modelOptions.length > 0) {
onModelChange(modelOptions[0]);
}
}}
/>
<Label
htmlFor="qa-manual-model"
className="text-sm font-normal cursor-pointer"
>
Add Model Manually
</Label>
</div>
</div>
) : modelOptions.length > 0 ? (
<div className="space-y-2">
<Select
value={model}
onValueChange={(v) => {
if (v) onModelChange(v);
}}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select model" />
</SelectTrigger>
<SelectContent>
{modelOptions.map((m) => (
<SelectItem key={m} value={m}>
{m}
</SelectItem>
))}
</SelectContent>
</Select>
<div className="flex items-center space-x-2">
<Checkbox
id="qa-manual-model-dropdown"
checked={isManualModelInput}
onCheckedChange={(checked) =>
setIsManualModelInput(checked as boolean)
}
/>
<Label
htmlFor="qa-manual-model-dropdown"
className="text-sm font-normal cursor-pointer"
>
Add Model Manually
</Label>
</div>
</div>
) : (
<Input
type="text"
placeholder="Enter model name"
value={model}
onChange={(e) => onModelChange(e.target.value)}
/>
)}
</div>
</div>
<div className="space-y-2">
<Label>API Key</Label>
<Input
type="text"
placeholder="Enter API key"
value={apiKey}
onChange={(e) => onApiKeyChange(e.target.value)}
/>
</div>
</div>
);
}

12
ui/src/components/flow/AddNodePanel.tsx
View file

@ -1,4 +1,4 @@
import { ExternalLink, Globe, Headset, Link2, LucideIcon, OctagonX, Play, Webhook, X } from 'lucide-react';
import { ClipboardCheck, ExternalLink, Globe, Headset, Link2, LucideIcon, OctagonX, Play, Webhook, X } from 'lucide-react';
import { useEffect } from 'react';
import { Button } from '@/components/ui/button';
@ -57,12 +57,18 @@ const TRIGGER_NODE_TYPES: NodeTypeConfig[] = [
}
];
const WEBHOOK_NODE_TYPES: NodeTypeConfig[] = [
const INTEGRATION_NODE_TYPES: NodeTypeConfig[] = [
{
type: NodeType.WEBHOOK,
label: 'Webhook',
description: 'Send HTTP request after workflow completion',
icon: Link2
},
{
type: NodeType.QA,
label: 'QA Analysis',
description: 'Run LLM quality analysis after each call',
icon: ClipboardCheck
}
];
@ -163,7 +169,7 @@ export default function AddNodePanel({ isOpen, onNodeSelect, onClose }: AddNodeP
<NodeSection
title="Integrations"
nodes={WEBHOOK_NODE_TYPES}
nodes={INTEGRATION_NODE_TYPES}
onNodeSelect={onNodeSelect}
/>
</div>

348
ui/src/components/flow/nodes/QANode.tsx Normal file
View file

@ -0,0 +1,348 @@
import { NodeProps, NodeToolbar, Position } from "@xyflow/react";
import { ChevronDown, ChevronRight, Circle, ClipboardCheck, Edit, Trash2Icon } from "lucide-react";
import { memo, useEffect, useMemo, useState } from "react";
import { useWorkflow } from "@/app/workflow/[workflowId]/contexts/WorkflowContext";
import { FlowNodeData } from "@/components/flow/types";
import { LLMConfigSelector } from "@/components/LLMConfigSelector";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { NodeContent } from "./common/NodeContent";
import { NodeEditDialog } from "./common/NodeEditDialog";
import { useNodeHandlers } from "./common/useNodeHandlers";
interface QANodeProps extends NodeProps {
data: FlowNodeData;
}
export const QANode = memo(({ data, selected, id }: QANodeProps) => {
const { open, setOpen, handleSaveNodeData, handleDeleteNode } = useNodeHandlers({ id });
const { saveWorkflow } = useWorkflow();
// Form state
const [name, setName] = useState(data.name || "QA Analysis");
const [qaEnabled, setQaEnabled] = useState(data.qa_enabled ?? true);
const [useWorkflowLlm, setUseWorkflowLlm] = useState(data.qa_use_workflow_llm ?? true);
const [qaProvider, setQaProvider] = useState(data.qa_provider || "openai");
const [qaModel, setQaModel] = useState(data.qa_model || "gpt-4.1");
const [qaApiKey, setQaApiKey] = useState(data.qa_api_key || "");
const [qaSystemPrompt, setQaSystemPrompt] = useState(data.qa_system_prompt || "");
const [minCallDuration, setMinCallDuration] = useState(data.qa_min_call_duration ?? 15);
const [qaVoicemailCalls, setQaVoicemailCalls] = useState(data.qa_voicemail_calls ?? false);
const [qaSampleRate, setQaSampleRate] = useState(data.qa_sample_rate ?? 100);
const isDirty = useMemo(() => {
return (
name !== (data.name || "QA Analysis") ||
qaEnabled !== (data.qa_enabled ?? true) ||
useWorkflowLlm !== (data.qa_use_workflow_llm ?? true) ||
qaProvider !== (data.qa_provider || "openai") ||
qaModel !== (data.qa_model || "gpt-4.1") ||
qaApiKey !== (data.qa_api_key || "") ||
qaSystemPrompt !== (data.qa_system_prompt || "") ||
minCallDuration !== (data.qa_min_call_duration ?? 15) ||
qaVoicemailCalls !== (data.qa_voicemail_calls ?? false) ||
qaSampleRate !== (data.qa_sample_rate ?? 100)
);
}, [name, qaEnabled, useWorkflowLlm, qaProvider, qaModel, qaApiKey, qaSystemPrompt, minCallDuration, qaVoicemailCalls, qaSampleRate, data]);
const handleSave = async () => {
handleSaveNodeData({
...data,
name,
qa_enabled: qaEnabled,
qa_use_workflow_llm: useWorkflowLlm,
qa_provider: qaProvider,
qa_model: qaModel,
qa_api_key: qaApiKey,
qa_system_prompt: qaSystemPrompt,
qa_min_call_duration: minCallDuration,
qa_voicemail_calls: qaVoicemailCalls,
qa_sample_rate: qaSampleRate,
});
setOpen(false);
setTimeout(async () => {
await saveWorkflow();
}, 100);
};
const resetFormState = () => {
setName(data.name || "QA Analysis");
setQaEnabled(data.qa_enabled ?? true);
setUseWorkflowLlm(data.qa_use_workflow_llm ?? true);
setQaProvider(data.qa_provider || "openai");
setQaModel(data.qa_model || "gpt-4.1");
setQaApiKey(data.qa_api_key || "");
setQaSystemPrompt(data.qa_system_prompt || "");
setMinCallDuration(data.qa_min_call_duration ?? 15);
setQaVoicemailCalls(data.qa_voicemail_calls ?? false);
setQaSampleRate(data.qa_sample_rate ?? 100);
};
const handleOpenChange = (newOpen: boolean) => {
if (newOpen) {
resetFormState();
}
setOpen(newOpen);
};
useEffect(() => {
if (open) {
resetFormState();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [data, open]);
return (
<>
<NodeContent
selected={selected}
invalid={data.invalid}
selected_through_edge={data.selected_through_edge}
hovered_through_edge={data.hovered_through_edge}
title={data.name || "QA Analysis"}
icon={<ClipboardCheck />}
nodeType="qa"
onDoubleClick={() => handleOpenChange(true)}
nodeId={id}
>
<div className="space-y-2">
<div className="flex items-center gap-2">
<span className="text-xs font-mono bg-muted px-1.5 py-0.5 rounded">
{data.qa_use_workflow_llm !== false
? "Workflow LLM"
: `${data.qa_provider || "openai"}/${data.qa_model || "gpt-4.1"}`}
</span>
</div>
<div className="flex items-center gap-1.5">
<Circle
className={`h-2 w-2 ${data.qa_enabled !== false ? "fill-green-500 text-green-500" : "fill-gray-400 text-gray-400"}`}
/>
<span className="text-xs text-muted-foreground">
{data.qa_enabled !== false ? "Enabled" : "Disabled"}
</span>
</div>
</div>
</NodeContent>
<NodeToolbar isVisible={selected} position={Position.Right}>
<div className="flex flex-col gap-1">
<Button onClick={() => handleOpenChange(true)} variant="outline" size="icon">
<Edit />
</Button>
<Button onClick={handleDeleteNode} variant="outline" size="icon">
<Trash2Icon />
</Button>
</div>
</NodeToolbar>
<NodeEditDialog
open={open}
onOpenChange={handleOpenChange}
nodeData={data}
title="Edit QA Analysis"
onSave={handleSave}
isDirty={isDirty}
>
{open && (
<QANodeEditForm
name={name}
setName={setName}
qaEnabled={qaEnabled}
setQaEnabled={setQaEnabled}
useWorkflowLlm={useWorkflowLlm}
setUseWorkflowLlm={setUseWorkflowLlm}
qaProvider={qaProvider}
setQaProvider={setQaProvider}
qaModel={qaModel}
setQaModel={setQaModel}
qaApiKey={qaApiKey}
setQaApiKey={setQaApiKey}
qaSystemPrompt={qaSystemPrompt}
setQaSystemPrompt={setQaSystemPrompt}
minCallDuration={minCallDuration}
setMinCallDuration={setMinCallDuration}
qaVoicemailCalls={qaVoicemailCalls}
setQaVoicemailCalls={setQaVoicemailCalls}
qaSampleRate={qaSampleRate}
setQaSampleRate={setQaSampleRate}
/>
)}
</NodeEditDialog>
</>
);
});
interface QANodeEditFormProps {
name: string;
setName: (value: string) => void;
qaEnabled: boolean;
setQaEnabled: (value: boolean) => void;
useWorkflowLlm: boolean;
setUseWorkflowLlm: (value: boolean) => void;
qaProvider: string;
setQaProvider: (value: string) => void;
qaModel: string;
setQaModel: (value: string) => void;
qaApiKey: string;
setQaApiKey: (value: string) => void;
qaSystemPrompt: string;
setQaSystemPrompt: (value: string) => void;
minCallDuration: number;
setMinCallDuration: (value: number) => void;
qaVoicemailCalls: boolean;
setQaVoicemailCalls: (value: boolean) => void;
qaSampleRate: number;
setQaSampleRate: (value: number) => void;
}
const QANodeEditForm = ({
name,
setName,
qaEnabled,
setQaEnabled,
useWorkflowLlm,
setUseWorkflowLlm,
qaProvider,
setQaProvider,
qaModel,
setQaModel,
qaApiKey,
setQaApiKey,
qaSystemPrompt,
setQaSystemPrompt,
minCallDuration,
setMinCallDuration,
qaVoicemailCalls,
setQaVoicemailCalls,
qaSampleRate,
setQaSampleRate,
}: QANodeEditFormProps) => {
const [advancedOpen, setAdvancedOpen] = useState(false);
return (
<div className="space-y-4">
<div className="grid gap-2">
<Label>Name</Label>
<Label className="text-xs text-muted-foreground">
A display name for this QA analysis node.
</Label>
<Input value={name} onChange={(e) => setName(e.target.value)} />
</div>
<div className="flex items-center space-x-2 p-2 border rounded-md bg-muted/20">
<Switch id="qa-enabled" checked={qaEnabled} onCheckedChange={setQaEnabled} />
<Label htmlFor="qa-enabled">Enabled</Label>
<Label className="text-xs text-muted-foreground ml-2">
Whether this QA analysis runs after each call.
</Label>
</div>
<div className="flex items-center space-x-2 p-2 border rounded-md bg-muted/20">
<Switch
id="use-workflow-llm"
checked={useWorkflowLlm}
onCheckedChange={setUseWorkflowLlm}
/>
<Label htmlFor="use-workflow-llm">Use Workflow LLM</Label>
<Label className="text-xs text-muted-foreground ml-2">
Use the LLM configured in your account settings.
</Label>
</div>
{!useWorkflowLlm && (
<LLMConfigSelector
provider={qaProvider}
onProviderChange={setQaProvider}
model={qaModel}
onModelChange={setQaModel}
apiKey={qaApiKey}
onApiKeyChange={setQaApiKey}
/>
)}
<div className="grid gap-2">
<Label>System Prompt</Label>
<Label className="text-xs text-muted-foreground">
The prompt sent to the LLM for QA analysis. Use {'{metrics}'} placeholder for
call metrics.
</Label>
<Textarea
value={qaSystemPrompt}
onChange={(e) => setQaSystemPrompt(e.target.value)}
className="min-h-[300px] font-mono text-xs"
placeholder="Enter QA analysis system prompt..."
/>
</div>
{/* Advanced Configuration */}
<div className="border rounded-md">
<button
type="button"
className="flex items-center gap-2 w-full p-3 text-sm font-medium hover:bg-muted/50 transition-colors"
onClick={() => setAdvancedOpen(!advancedOpen)}
>
{advancedOpen ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
Advanced Configuration
</button>
{advancedOpen && (
<div className="px-3 pb-3 space-y-4 border-t pt-3">
<div className="grid gap-2">
<Label>Minimum Call Duration (seconds)</Label>
<Label className="text-xs text-muted-foreground">
Calls shorter than this duration will be skipped from QA analysis.
</Label>
<Input
type="number"
min={0}
value={minCallDuration}
onChange={(e) => setMinCallDuration(Number(e.target.value))}
/>
</div>
<div className="flex items-center space-x-2 p-2 border rounded-md bg-muted/20">
<Switch
id="qa-voicemail"
checked={qaVoicemailCalls}
onCheckedChange={setQaVoicemailCalls}
/>
<Label htmlFor="qa-voicemail">QA Voicemail Calls</Label>
<Label className="text-xs text-muted-foreground ml-2">
Run QA analysis on calls that reached voicemail.
</Label>
</div>
<div className="grid gap-2">
<Label>Sample Rate (%)</Label>
<Label className="text-xs text-muted-foreground">
Percentage of eligible calls to run QA analysis on.
</Label>
<Input
type="number"
min={1}
max={100}
value={qaSampleRate}
onChange={(e) =>
setQaSampleRate(
Math.min(100, Math.max(1, Number(e.target.value)))
)
}
/>
</div>
</div>
)}
</div>
</div>
);
};
QANode.displayName = "QANode";

4
ui/src/components/flow/nodes/common/NodeContent.tsx
View file

@ -12,7 +12,7 @@ interface NodeContentProps {
hovered_through_edge?: boolean;
title: string;
icon: ReactNode;
nodeType?: 'start' | 'agent' | 'end' | 'global' | 'trigger' | 'webhook';
nodeType?: 'start' | 'agent' | 'end' | 'global' | 'trigger' | 'webhook' | 'qa';
hasSourceHandle?: boolean;
hasTargetHandle?: boolean;
children?: ReactNode;
@ -36,6 +36,8 @@ const getNodeTypeBadge = (nodeType?: string) => {
return { label: 'API Trigger', className: 'bg-purple-500 text-white' };
case 'webhook':
return { label: 'Webhook', className: 'bg-indigo-500 text-white' };
case 'qa':
return { label: 'QA Analysis', className: 'bg-teal-500 text-white' };
default:
return { label: 'Node', className: 'bg-zinc-500 text-white' };
}

1
ui/src/components/flow/nodes/index.ts
View file

@ -1,6 +1,7 @@
export * from './AgentNode';
export * from './EndCall';
export * from './GlobalNode';
export * from './QANode';
export * from './StartCall';
export * from './TriggerNode';
export * from './WebhookNode';

13
ui/src/components/flow/types.ts
View file

@ -4,7 +4,8 @@ export enum NodeType {
END_CALL = 'endCall',
GLOBAL_NODE = 'globalNode',
TRIGGER = 'trigger',
WEBHOOK = 'webhook'
WEBHOOK = 'webhook',
QA = 'qa'
}
export type FlowNodeData = {
@ -40,6 +41,16 @@ export type FlowNodeData = {
max_retries: number;
retry_delay_seconds: number;
};
// QA node specific
qa_enabled?: boolean;
qa_system_prompt?: string;
qa_use_workflow_llm?: boolean;
qa_provider?: string;
qa_model?: string;
qa_api_key?: string;
qa_min_call_duration?: number;
qa_voicemail_calls?: boolean;
qa_sample_rate?: number;
// Tools - array of tool UUIDs that can be invoked by this node
tool_uuids?: string[];
// Documents - array of knowledge base document UUIDs that can be referenced by this node