+ {t('common.loading')}
+
+ );
+ }
+
+ if (agent.kind === 'pipeline') {
+ return
+
+ );
+}
diff --git a/web/src/app/home/agents/components/AgentCreateContent.tsx b/web/src/app/home/agents/components/AgentCreateContent.tsx
new file mode 100644
index 000000000..654aaa041
--- /dev/null
+++ b/web/src/app/home/agents/components/AgentCreateContent.tsx
@@ -0,0 +1,214 @@
+import { useState } from 'react';
+import type React from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+import { Bot, Workflow } from 'lucide-react';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { AgentKind } from '@/app/infra/entities/api';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/components/ui/card';
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import EmojiPicker from '@/components/ui/emoji-picker';
+
+export default function AgentCreateContent({
+ onCreated,
+}: {
+ onCreated: (agentId: string) => void;
+}) {
+ const { t } = useTranslation();
+ const [kind, setKind] = useState
+
+
+ {t('agents.editAgent')}
+ +
+ {
+ refreshPipelines();
+ }}
+ onDeleted={() => {
+ refreshPipelines();
+ navigate('/home/agents');
+ }}
+ onDirtyChange={setFormDirty}
+ onSavingChange={setFormSaving}
+ />
+
+
+
+ );
+}
diff --git a/web/src/app/home/agents/components/AgentFormComponent.tsx b/web/src/app/home/agents/components/AgentFormComponent.tsx
new file mode 100644
index 000000000..c17c6e28c
--- /dev/null
+++ b/web/src/app/home/agents/components/AgentFormComponent.tsx
@@ -0,0 +1,680 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type React from 'react';
+import { Link } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+import {
+ Brain,
+ CircleAlert,
+ CircleCheck,
+ FileJson2,
+ Info,
+ LoaderCircle,
+ Power,
+ RefreshCw,
+ Trash2,
+ Unplug,
+} from 'lucide-react';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { Agent, ApiRespPluginSystemStatus } from '@/app/infra/entities/api';
+import {
+ PipelineConfigStage,
+ PipelineConfigTab,
+} from '@/app/infra/entities/pipeline';
+import DynamicFormComponent from '@/app/home/components/dynamic-form/DynamicFormComponent';
+import { extractI18nObject } from '@/i18n/I18nProvider';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import EmojiPicker from '@/components/ui/emoji-picker';
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/components/ui/card';
+import {
+ Dialog,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog';
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from '@/components/ui/form';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+
+interface AgentFormComponentProps {
+ agentId: string;
+ onFinish: () => void;
+ onDeleted: () => void;
+ onDirtyChange?: (dirty: boolean) => void;
+ onSavingChange?: (saving: boolean) => void;
+}
+
+interface SectionItem {
+ label: string;
+ name: 'basic' | 'runner' | 'events';
+ icon: React.ElementType;
+}
+
+export default function AgentFormComponent({
+ agentId,
+ onFinish,
+ onDeleted,
+ onDirtyChange,
+ onSavingChange,
+}: AgentFormComponentProps) {
+ const { t } = useTranslation();
+ const [activeSection, setActiveSection] =
+ useState
+
+
+ {t('agents.create')}
+ +
+
+
+
+
+ {t('agents.basicInfo')}
+
+ {t('agents.basicInfoDescription')}
+
+
+
+
+
+
+
+
+
+ {typeOptions.map((option) => {
+ const Icon = option.icon;
+ const selected = kind === option.kind;
+ return (
+
+ );
+ })}
+
+
+
+ {showRetry && (
+
+ )}
+
+
+ );
+ }
+
+ function renderRunnerStatus() {
+ if (pluginStatusLoading) {
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/web/src/app/home/agents/page.tsx b/web/src/app/home/agents/page.tsx
new file mode 100644
index 000000000..fb13ec41e
--- /dev/null
+++ b/web/src/app/home/agents/page.tsx
@@ -0,0 +1,19 @@
+import { useSearchParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import AgentDetailContent from './AgentDetailContent';
+
+export default function AgentsPage() {
+ const { t } = useTranslation();
+ const [searchParams] = useSearchParams();
+ const detailId = searchParams.get('id');
+
+ if (detailId) {
+ return
+
+ );
+}
diff --git a/web/src/app/home/bots/components/bot-form/BotForm.tsx b/web/src/app/home/bots/components/bot-form/BotForm.tsx
index 3b3aafb6b..cca68783f 100644
--- a/web/src/app/home/bots/components/bot-form/BotForm.tsx
+++ b/web/src/app/home/bots/components/bot-form/BotForm.tsx
@@ -1,9 +1,6 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import i18n from 'i18next';
-import {
- IChooseAdapterEntity,
- IPipelineEntity,
-} from '@/app/home/bots/components/bot-form/ChooseEntity';
+import { IChooseAdapterEntity } from '@/app/home/bots/components/bot-form/ChooseEntity';
import {
DynamicFormItemConfig,
getDefaultValues,
@@ -14,10 +11,10 @@ import { UUID } from 'uuidjs';
import DynamicFormComponent from '@/app/home/components/dynamic-form/DynamicFormComponent';
import { httpClient } from '@/app/infra/http/HttpClient';
import { systemInfo } from '@/app/infra/http';
-import { Bot } from '@/app/infra/entities/api';
+import { Agent, Bot } from '@/app/infra/entities/api';
import { getAdapterDocUrl } from '@/app/infra/entities/adapter-docs';
-import { ExternalLink } from 'lucide-react';
-import RoutingRulesEditor from './RoutingRulesEditor';
+import { ExternalLink, ChevronDown, ChevronRight } from 'lucide-react';
+import EventBindingsEditor from './EventBindingsEditor';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
@@ -65,26 +62,18 @@ const getFormSchema = (t: (key: string) => string) =>
adapter: z.string().min(1, { message: t('bots.adapterRequired') }),
adapter_config: z.record(z.string(), z.any()),
enable: z.boolean().optional(),
- use_pipeline_uuid: z.string().optional(),
- pipeline_routing_rules: z
+ event_bindings: z
.array(
z.object({
- type: z.enum([
- 'launcher_type',
- 'launcher_id',
- 'message_content',
- 'message_has_element',
- ]),
- operator: z.enum([
- 'eq',
- 'neq',
- 'contains',
- 'not_contains',
- 'starts_with',
- 'regex',
- ]),
- value: z.string(),
- pipeline_uuid: z.string(),
+ id: z.string().optional(),
+ event_pattern: z.string(),
+ target_type: z.enum(['agent', 'pipeline', 'discard']),
+ target_uuid: z.string(),
+ filters: z.array(z.record(z.string(), z.any())).optional(),
+ priority: z.number(),
+ enabled: z.boolean(),
+ description: z.string().optional(),
+ order: z.number().optional(),
}),
)
.optional(),
@@ -112,8 +101,7 @@ export default function BotForm({
adapter: '',
adapter_config: {},
enable: true,
- use_pipeline_uuid: '',
- pipeline_routing_rules: [],
+ event_bindings: [],
},
});
@@ -133,10 +121,11 @@ export default function BotForm({
const [adapterHelpLinks, setAdapterHelpLinks] = useState<
Record{t('agents.selectFromSidebar')}
+
+
})
-
- {adapterNameList.find(
+ {(() => {
+ const selectedAdapter = adapterNameList.find(
(a) => a.value === field.value,
- )?.label ?? field.value}
-
+ );
+
+ return (
+ <>
+
+ {selectedAdapter?.label ?? field.value}
+
+ {selectedAdapter?.legacy && (
+
+ {t('bots.legacyAdapterBadge')}
+
+ )}
+
+ );
+ })()}
) : (
)}
{group.items.map((item) => (
-
-
+
+
- {item.label}
+
+ {item.label}
+
))}
))}
+ {legacyAdapters.length > 0 && (
+ <>
+
+ {legacyAdapters.map((item) => (
+
+
+ ))}
+
+
+ )}
+
+ )}
{currentAdapter &&
@@ -628,6 +650,26 @@ export default function BotForm({
)}
+
+ {/* Card 3: Event Routing */}
+ {currentAdapter && (
+
+
+ {t('bots.eventRouting')}
+
+ {t('bots.eventRoutingDescription')}
+
+
+
+
+
+ )}
);
diff --git a/web/src/app/home/bots/components/bot-form/ChooseEntity.ts b/web/src/app/home/bots/components/bot-form/ChooseEntity.ts
index b7ba86968..c460f06b4 100644
--- a/web/src/app/home/bots/components/bot-form/ChooseEntity.ts
+++ b/web/src/app/home/bots/components/bot-form/ChooseEntity.ts
@@ -2,6 +2,7 @@ export interface IChooseAdapterEntity {
label: string;
value: string;
categories?: string[];
+ legacy?: boolean;
}
export interface IPipelineEntity {
diff --git a/web/src/app/home/bots/components/bot-form/EventBindingsEditor.tsx b/web/src/app/home/bots/components/bot-form/EventBindingsEditor.tsx
new file mode 100644
index 000000000..bf0980508
--- /dev/null
+++ b/web/src/app/home/bots/components/bot-form/EventBindingsEditor.tsx
@@ -0,0 +1,1840 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+import { UseFormReturn } from 'react-hook-form';
+import {
+ Activity,
+ AlertCircle,
+ ArrowRight,
+ Ban,
+ Bot,
+ Check,
+ CheckCircle2,
+ ChevronDown,
+ ChevronRight,
+ ChevronsUpDown,
+ GripVertical,
+ Info,
+ ListChecks,
+ MessageSquare,
+ Plus,
+ Play,
+ RefreshCw,
+ Shield,
+ Trash2,
+ UserCheck,
+ UserMinus,
+ UserPlus,
+ Workflow,
+ XCircle,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from '@/components/ui/command';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+ DndContext,
+ DragOverlay,
+ closestCenter,
+ PointerSensor,
+ KeyboardSensor,
+ useSensor,
+ useSensors,
+ DragEndEvent,
+ DragStartEvent,
+} from '@dnd-kit/core';
+import {
+ arrayMove,
+ SortableContext,
+ sortableKeyboardCoordinates,
+ useSortable,
+ verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import {
+ EventBinding,
+ Agent,
+ BotRouteDryRunResult,
+ BotEventRouteStatus,
+ BotRouteTestResult,
+} from '@/app/infra/entities/api';
+import { backendClient } from '@/app/infra/http';
+
+export const PIPELINE_DISCARD = '__discard__';
+
+// ── types ─────────────────────────────────────────────────────────────────────
+
+interface EventBindingsEditorProps {
+ form: UseFormReturn;
+ botId?: string;
+ supportedEvents: string[];
+ agentOptions: Agent[];
+}
+
+type FilterField =
+ | 'chat_type'
+ | 'chat_id'
+ | 'message_text'
+ | 'message_element_types';
+type FilterOperator =
+ | 'eq'
+ | 'neq'
+ | 'contains'
+ | 'not_contains'
+ | 'starts_with'
+ | 'regex';
+
+interface FilterRow {
+ field: FilterField;
+ operator: FilterOperator;
+ value: string;
+}
+
+const OPERATORS_BY_FIELD: Record = {
+ chat_type: ['eq', 'neq'],
+ chat_id: ['eq', 'neq', 'contains', 'not_contains', 'regex'],
+ message_text: [
+ 'contains',
+ 'not_contains',
+ 'eq',
+ 'neq',
+ 'starts_with',
+ 'regex',
+ ],
+ message_element_types: ['contains', 'not_contains'],
+};
+
+const ELEMENTS = [
+ 'Image',
+ 'Voice',
+ 'File',
+ 'Forward',
+ 'Face',
+ 'At',
+ 'AtAll',
+ 'Quote',
+];
+
+// Adapters that don't declare `supported_events` (e.g. legacy adapters)
+// only emit message.received, so that's the sole fallback option.
+const DEFAULT_EVENTS = ['message.received'];
+
+const BEHAVIOR_PRESETS = [
+ {
+ eventType: 'message.received',
+ labelKey: 'bots.behaviorReplyMessages',
+ descriptionKey: 'bots.behaviorReplyMessagesDescription',
+ icon: MessageSquare,
+ },
+ {
+ eventType: 'group.member_joined',
+ labelKey: 'bots.behaviorWelcomeMembers',
+ descriptionKey: 'bots.behaviorWelcomeMembersDescription',
+ icon: UserPlus,
+ },
+ {
+ eventType: 'group.member_left',
+ labelKey: 'bots.behaviorHandleDepartures',
+ descriptionKey: 'bots.behaviorHandleDeparturesDescription',
+ icon: UserMinus,
+ },
+ {
+ eventType: 'friend.request_received',
+ labelKey: 'bots.behaviorReviewFriendRequests',
+ descriptionKey: 'bots.behaviorReviewFriendRequestsDescription',
+ icon: UserCheck,
+ },
+ {
+ eventType: 'group.member_banned',
+ labelKey: 'bots.behaviorHandleModeration',
+ descriptionKey: 'bots.behaviorHandleModerationDescription',
+ icon: Shield,
+ },
+];
+
+// ── helpers ───────────────────────────────────────────────────────────────────
+
+function isMessageEventPattern(p: string) {
+ return p === 'message.*' || p.startsWith('message.');
+}
+
+function eventPatternCovers(sup: string, bind: string) {
+ if (sup === '*') return true;
+ if (sup === bind) return true;
+ if (bind === '*') return false;
+ if (sup.endsWith('.*')) {
+ const ns = sup.replace('.*', '');
+ return bind === `${ns}.*` || bind.startsWith(`${ns}.`);
+ }
+ return false;
+}
+
+interface RouteConflict {
+ winnerIndex: number;
+ shadowedIndex: number;
+}
+
+function bindingFilters(binding: EventBinding) {
+ return binding.filters ?? [];
+}
+
+function filtersEqual(a: EventBinding, b: EventBinding) {
+ return (
+ JSON.stringify(bindingFilters(a)) === JSON.stringify(bindingFilters(b))
+ );
+}
+
+function routePrecedes(
+ a: EventBinding,
+ aIndex: number,
+ b: EventBinding,
+ bIndex: number,
+) {
+ const aPriority = Number.isFinite(a.priority) ? a.priority : 0;
+ const bPriority = Number.isFinite(b.priority) ? b.priority : 0;
+ return aPriority === bPriority ? aIndex < bIndex : aPriority > bPriority;
+}
+
+function findRouteConflicts(bindings: EventBinding[]): RouteConflict[] {
+ const enabled = bindings
+ .map((binding, index) => ({ binding, index }))
+ .filter(({ binding }) => binding.enabled ?? true);
+ const conflicts: RouteConflict[] = [];
+
+ for (let left = 0; left < enabled.length; left += 1) {
+ for (let right = left + 1; right < enabled.length; right += 1) {
+ const a = enabled[left];
+ const b = enabled[right];
+ const [winner, shadowed] = routePrecedes(
+ a.binding,
+ a.index,
+ b.binding,
+ b.index,
+ )
+ ? [a, b]
+ : [b, a];
+
+ if (
+ !eventPatternCovers(
+ winner.binding.event_pattern,
+ shadowed.binding.event_pattern,
+ )
+ ) {
+ continue;
+ }
+
+ if (
+ bindingFilters(winner.binding).length === 0 ||
+ filtersEqual(winner.binding, shadowed.binding)
+ ) {
+ conflicts.push({
+ winnerIndex: winner.index,
+ shadowedIndex: shadowed.index,
+ });
+ }
+ }
+ }
+
+ return conflicts;
+}
+
+function findCatchAllRouteIndex(bindings: EventBinding[]) {
+ const candidates = bindings
+ .map((binding, index) => ({ binding, index }))
+ .filter(
+ ({ binding }) =>
+ (binding.enabled ?? true) &&
+ binding.event_pattern === '*' &&
+ bindingFilters(binding).length === 0,
+ );
+ candidates.sort((a, b) =>
+ routePrecedes(a.binding, a.index, b.binding, b.index) ? -1 : 1,
+ );
+ return candidates[0]?.index ?? -1;
+}
+
+function agentSupportsEventPattern(agent: Agent, pattern: string) {
+ const patterns = agent.supported_event_patterns ??
+ agent.capability?.supported_event_patterns ?? ['*'];
+ return patterns.some((p) => eventPatternCovers(p, pattern));
+}
+
+function eventNamespaces(events: string[]) {
+ // Only surface a `ns.*` wildcard when the namespace actually has 2+
+ // concrete events — otherwise the wildcard is redundant with the single event.
+ const counts = new Map();
+ events.forEach((e) => {
+ const n = e.split('.')[0];
+ if (n) counts.set(n, (counts.get(n) ?? 0) + 1);
+ });
+ return Array.from(counts.entries())
+ .filter(([, c]) => c >= 2)
+ .map(([n]) => `${n}.*`)
+ .sort();
+}
+
+// Localized label for an event pattern. Concrete events look up
+// `bots.eventNames.`, falling back to the raw
+// string when no translation exists (e.g. custom/unknown events).
+function eventLabel(event: string, t: TFunction) {
+ if (event === '*') return t('bots.eventWildcard');
+ if (event.endsWith('.*'))
+ return t('bots.eventNamespaceWildcard', {
+ namespace: event.replace('.*', ''),
+ });
+ const key = `bots.eventNames.${event.replace(/\./g, '_')}`;
+ const label = t(key);
+ return label === key ? event : label;
+}
+
+function eventDescription(event: string, t: TFunction) {
+ if (event === '*') return t('bots.eventDescriptions.all');
+ if (event.endsWith('.*')) return t('bots.eventDescriptions.namespace');
+ const key = `bots.eventDescriptions.${event.replace(/\./g, '_')}`;
+ const description = t(key);
+ return description === key ? t('bots.eventDescriptions.custom') : description;
+}
+
+function targetLabel(agent: Agent) {
+ return `${agent.emoji ? `${agent.emoji} ` : ''}${agent.name}`;
+}
+
+function targetTypeLabel(
+ type: EventBinding['target_type'] | undefined,
+ t: TFunction,
+) {
+ if (type === 'pipeline') return t('bots.targetPipeline');
+ if (type === 'discard') return t('bots.targetDiscard');
+ return t('bots.targetAgent');
+}
+
+function routeStatusLabel(
+ status: BotEventRouteStatus['last_status'] | undefined,
+ t: TFunction,
+) {
+ if (!status) return t('bots.routeStatusIdle');
+ const key = `bots.routeStatus.${status}`;
+ const label = t(key);
+ return label === key ? String(status) : label;
+}
+
+function routeStatusBadgeClass(
+ status: BotEventRouteStatus['last_status'] | undefined,
+) {
+ if (status === 'delivered') {
+ return 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/40 dark:bg-emerald-950/30 dark:text-emerald-300';
+ }
+ if (status === 'matched' || status === 'discarded') {
+ return 'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-900/40 dark:bg-sky-950/30 dark:text-sky-300';
+ }
+ if (status === 'failed' || status === 'not_matched') {
+ return 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-300';
+ }
+ return 'border-border bg-muted/40 text-muted-foreground';
+}
+
+function localizedFailureReason(
+ failureCode: string | null | undefined,
+ fallback: string | null | undefined,
+ t: TFunction,
+) {
+ if (!failureCode) return fallback || '';
+ const key = `bots.routeFailure.${failureCode}`;
+ const label = t(key);
+ return label === key ? fallback || failureCode : label;
+}
+
+function routeStatusDetail(
+ status: BotEventRouteStatus | undefined,
+ t: TFunction,
+) {
+ if (!status) return '';
+ if (status.failure_code) {
+ return localizedFailureReason(status.failure_code, status.reason, t);
+ }
+ if (status.last_status) {
+ const key = `bots.routeStatusDetail.${status.last_status}`;
+ const label = t(key);
+ if (label !== key) return label;
+ }
+ return status.reason || formatRouteStatusTime(status.timestamp);
+}
+
+function diagnosticDetailLabel(
+ detail: Record,
+ fallbackIndex: number,
+ t: TFunction,
+) {
+ const order =
+ typeof detail.binding_index === 'number'
+ ? detail.binding_index
+ : typeof detail.order === 'number'
+ ? detail.order
+ : fallbackIndex;
+ const route = t('bots.dryRunRuleIndex', { index: order + 1 });
+ if (detail.selected) {
+ return t('bots.dryRunDiagnosticSelected', { route });
+ }
+ const failureCode =
+ typeof detail.failure_code === 'string' ? detail.failure_code : null;
+ const reason = localizedFailureReason(
+ failureCode,
+ typeof detail.reason === 'string' ? detail.reason : null,
+ t,
+ );
+ if (detail.matched) {
+ return t('bots.dryRunDiagnosticMatched', { route, reason });
+ }
+ return t('bots.dryRunDiagnosticSkipped', { route, reason });
+}
+
+function formatRouteStatusTime(timestamp: number | null | undefined) {
+ if (!timestamp) return '';
+ return new Date(timestamp * 1000).toLocaleString();
+}
+
+function samplePayloadForEvent(eventType: string): Record {
+ if (eventType === 'message.received') {
+ return {
+ message_text: 'Hello',
+ chat_type: 'private',
+ chat_id: 'test-user',
+ user_id: 'test-user',
+ };
+ }
+ if (eventType === 'group.member_joined') {
+ return {
+ group_id: 'test-group',
+ group_name: 'Test Group',
+ user_id: 'test-user',
+ user_name: 'Test User',
+ };
+ }
+ if (eventType === 'group.member_left') {
+ return {
+ group_id: 'test-group',
+ group_name: 'Test Group',
+ user_id: 'test-user',
+ user_name: 'Test User',
+ is_kicked: false,
+ };
+ }
+ if (eventType === 'platform.specific') {
+ return { action: 'test', data: {} };
+ }
+ return {};
+}
+
+// ── target combobox (type + target merged, with search + groups) ───────────────
+
+// Encoded value: "discard", "agent:", "pipeline:"
+function encodeTarget(type: EventBinding['target_type'], uuid: string): string {
+ return type === 'discard' ? 'discard' : `${type}:${uuid}`;
+}
+function decodeTarget(val: string): {
+ type: EventBinding['target_type'];
+ uuid: string;
+} {
+ if (val === 'discard') return { type: 'discard', uuid: '' };
+ const sep = val.indexOf(':');
+ return {
+ type: val.slice(0, sep) as EventBinding['target_type'],
+ uuid: val.slice(sep + 1),
+ };
+}
+
+function TargetCombobox({
+ binding,
+ agentOptions,
+ onUpdate,
+}: {
+ binding: EventBinding;
+ agentOptions: Agent[];
+ onUpdate: (patch: Partial) => void;
+}) {
+ const { t } = useTranslation();
+ const [open, setOpen] = useState(false);
+ const pipelineAllowed = isMessageEventPattern(binding.event_pattern);
+ const targetType = binding.target_type || 'agent';
+
+ const current =
+ targetType === 'discard'
+ ? encodeTarget('discard', '')
+ : binding.target_uuid
+ ? encodeTarget(targetType, binding.target_uuid)
+ : '';
+
+ const agents = agentOptions.filter(
+ (a) =>
+ a.kind === 'agent' && agentSupportsEventPattern(a, binding.event_pattern),
+ );
+ const pipelines = pipelineAllowed
+ ? agentOptions.filter((a) => a.kind === 'pipeline')
+ : [];
+
+ function currentLabel() {
+ if (targetType === 'discard')
+ return (
+
+
+
+
+
+
+
+
+ {t('bots.noTargetFound')}
+ {agents.length > 0 && (
+
+ {agents.map((a) => (
+ select(encodeTarget('agent', a.uuid || ''))}
+ >
+
+ ))}
+
+ )}
+ {pipelines.length > 0 && (
+
+ {pipelines.map((a) => (
+
+ select(encodeTarget('pipeline', a.uuid || ''))
+ }
+ >
+
+ ))}
+
+ )}
+
+
+
+
+ );
+}
+
+// ── filter conditions panel ───────────────────────────────────────────────────
+
+function FilterConditionsPanel({
+ filters,
+ onChange,
+}: {
+ filters: FilterRow[];
+ onChange: (f: FilterRow[]) => void;
+}) {
+ const { t } = useTranslation();
+
+ function add() {
+ onChange([
+ ...filters,
+ { field: 'chat_type', operator: 'eq', value: 'person' },
+ ]);
+ }
+
+ function update(i: number, patch: Partial) {
+ const next = [...filters];
+ next[i] = { ...next[i], ...patch };
+ if ('field' in patch) {
+ next[i].operator = OPERATORS_BY_FIELD[patch.field as FilterField][0];
+ next[i].value = '';
+ }
+ onChange(next);
+ }
+
+ function remove(i: number) {
+ const next = [...filters];
+ next.splice(i, 1);
+ onChange(next);
+ }
+
+ return (
+ (null);
+ const [runError, setRunError] = useState(null);
+ const [result, setResult] = useState(null);
+ const [dispatchResult, setDispatchResult] =
+ useState(null);
+
+ useEffect(() => {
+ if (!eventOptions.includes(eventType)) {
+ setEventType(firstEvent);
+ }
+ }, [eventOptions, eventType, firstEvent]);
+
+ useEffect(() => {
+ setPayloadText(JSON.stringify(samplePayloadForEvent(eventType), null, 2));
+ setPayloadError(null);
+ setResult(null);
+ setDispatchResult(null);
+ }, [eventType]);
+
+ function resolveTargetName(resultTarget?: BotRouteDryRunResult['target']) {
+ if (!resultTarget) return '';
+ if (resultTarget.target_name) return resultTarget.target_name;
+ if (resultTarget.target_type === 'discard') return t('bots.targetDiscard');
+ const agent = agentOptions.find((a) => a.uuid === resultTarget.target_uuid);
+ return agent ? targetLabel(agent) : (resultTarget.target_uuid ?? '');
+ }
+
+ function parsePayload(): Record | null {
+ setPayloadError(null);
+ let payload: Record = {};
+ if (payloadText.trim()) {
+ try {
+ const parsed = JSON.parse(payloadText);
+ if (
+ parsed === null ||
+ typeof parsed !== 'object' ||
+ Array.isArray(parsed)
+ ) {
+ setPayloadError(t('bots.dryRunPayloadObjectError'));
+ return null;
+ }
+ payload = parsed as Record;
+ } catch {
+ setPayloadError(t('bots.dryRunPayloadJsonError'));
+ return null;
+ }
+ }
+ return payload;
+ }
+
+ async function runDryRun() {
+ setRunError(null);
+ setResult(null);
+ setDispatchResult(null);
+
+ const payload = parsePayload();
+ if (payload === null) return;
+
+ if (!botId) {
+ setRunError(t('bots.dryRunNeedsSavedBot'));
+ return;
+ }
+
+ setIsRunning(true);
+ try {
+ const dryRunResult = await backendClient.dryRunBotEventRoute(botId, {
+ event_type: eventType,
+ payload,
+ event_bindings: bindings,
+ });
+ setResult({
+ ...dryRunResult,
+ diagnostic_steps: dryRunResult.diagnostic_steps ?? [],
+ });
+ } catch (error) {
+ const err = error as { msg?: string };
+ setRunError(err.msg || t('bots.dryRunFailed'));
+ } finally {
+ setIsRunning(false);
+ }
+ }
+
+ async function dispatchTestEvent() {
+ setRunError(null);
+ setDispatchResult(null);
+
+ const payload = parsePayload();
+ if (payload === null) return;
+
+ if (!botId) {
+ setRunError(t('bots.dryRunNeedsSavedBot'));
+ return;
+ }
+
+ setIsDispatching(true);
+ try {
+ const testResult = await backendClient.testBotEventRoute(botId, {
+ event_type: eventType,
+ payload,
+ });
+ setDispatchResult(testResult);
+ onRouteStatusUpdate?.(testResult.route_status?.routes || []);
+ if (!testResult.dispatched) {
+ setRunError(
+ localizedFailureReason(
+ testResult.failure_code,
+ testResult.reason,
+ t,
+ ) || t('bots.routeTestFailed'),
+ );
+ }
+ } catch (error) {
+ const err = error as { msg?: string };
+ setRunError(err.msg || t('bots.routeTestFailed'));
+ } finally {
+ setIsDispatching(false);
+ }
+ }
+
+ const targetName = result ? resolveTargetName(result.target) : '';
+
+ return (
+ <>
+
+
{
+ e.preventDefault();
+ e.stopPropagation();
+ setShowLegacyAdapters((v) => !v);
+ }}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ setShowLegacyAdapters((v) => !v);
+ }
+ }}
+ className="flex cursor-pointer items-center gap-1 px-2 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground border-t mt-1 pt-2"
+ >
+ {showLegacyAdapters ? (
+
+ {showLegacyAdapters && (
+ <>
+ + {t('bots.legacyAdaptersHint')} +
+
+
+
+ {item.label}
+
+
+ {t('bots.legacyAdapterBadge')}
+
+
+
+ {filters.length === 0 && (
+
+ );
+}
+
+// ── adapter capability summary ────────────────────────────────────────────────
+
+function AdapterCapabilitySummary({
+ supportedEvents,
+ eventOptions,
+}: {
+ supportedEvents: string[];
+ eventOptions: string[];
+}) {
+ const { t } = useTranslation();
+ const [advancedOpen, setAdvancedOpen] = useState(false);
+ const concreteEvents =
+ supportedEvents.length > 0 ? supportedEvents : DEFAULT_EVENTS;
+ const previewEvents = concreteEvents.slice(0, 4);
+
+ return (
+ + {t('bots.conditionsEmpty')} +
+ )} + {filters.map((f, i) => ( +
+
+
+
+
+ {f.field === 'chat_type' ? (
+
+ ) : f.field === 'message_element_types' ? (
+
+ ) : (
+ update(i, { value: e.target.value })}
+ />
+ )}
+
+
+
+ ))}
+
+
+
+ );
+}
+
+// ── route dry-run dialog ─────────────────────────────────────────────────────
+
+function RouteDryRunDialog({
+ botId,
+ bindings,
+ eventOptions,
+ agentOptions,
+ onRouteStatusUpdate,
+}: {
+ botId?: string;
+ bindings: EventBinding[];
+ eventOptions: string[];
+ agentOptions: Agent[];
+ onRouteStatusUpdate?: (statuses: BotEventRouteStatus[]) => void;
+}) {
+ const { t } = useTranslation();
+ const firstEvent = eventOptions[0] ?? DEFAULT_EVENTS[0];
+ const [open, setOpen] = useState(false);
+ const [eventType, setEventType] = useState(firstEvent);
+ const [payloadText, setPayloadText] = useState(() =>
+ JSON.stringify(samplePayloadForEvent(firstEvent), null, 2),
+ );
+ const [advancedPayloadOpen, setAdvancedPayloadOpen] = useState(false);
+ const [isRunning, setIsRunning] = useState(false);
+ const [isDispatching, setIsDispatching] = useState(false);
+ const [payloadError, setPayloadError] = useState
+
+ {advancedOpen && (
+
+
+
+
+
+
+
+
+ + {t('bots.adapterEventsTitle')} +
++ {t('bots.adapterEventsDescription', { + count: concreteEvents.length, + })} +
+
+ {previewEvents.map((event) => (
+
+ {eventLabel(event, t)}
+
+ ))}
+ {concreteEvents.length > previewEvents.length && (
+
+ {t('bots.adapterEventsMore', {
+ count: concreteEvents.length - previewEvents.length,
+ })}
+
+ )}
+
+
+ {eventOptions.map((event) => (
+
+ )}
+
+
+ ))}
+
+
+ {eventLabel(event, t)}
+
+ {event.endsWith('.*') && (
+
+ {t('bots.eventGroup')}
+
+ )}
+
+ + {eventDescription(event, t)} +
+
+ {event}
+
+