@llamaindex/workflow-debugger 0.1.8 → 0.2.0

package/src/components/send-event-dialog.tsx

@@ -0,0 +1,299 @@
+import { useState, useEffect, useMemo } from "react";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  useWorkflowsClient,
+} from "@llamaindex/ui";
+import { Send } from "lucide-react";
+import { JsonSchemaEditor } from "./json-schema-editor";
+import type { JSONValue } from "./workflow-config-panel";
+import {
+  postEventsByHandlerId,
+  getWorkflowsByNameEvents,
+} from "@llamaindex/workflows-client";
+
+interface EventSchema {
+  title?: string;
+  type?: string;
+  properties?: Record<string, unknown>;
+  required?: string[];
+}
+
+interface SendEventDialogProps {
+  handlerId: string | null;
+  workflowName: string | null;
+  disabled?: boolean;
+}
+
+export function SendEventDialog({
+  handlerId,
+  workflowName,
+  disabled,
+}: SendEventDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [eventSchemas, setEventSchemas] = useState<EventSchema[]>([]);
+  const [selectedEventType, setSelectedEventType] = useState<string | null>(
+    null,
+  );
+  const [eventData, setEventData] = useState<Record<string, JSONValue>>({});
+  const [loading, setLoading] = useState(false);
+  const [schemaErrors, setSchemaErrors] = useState<Record<
+    string,
+    string | null
+  > | null>(null);
+  const [sending, setSending] = useState(false);
+  const [sendError, setSendError] = useState<string | null>(null);
+  const [sendSuccess, setSendSuccess] = useState(false);
+
+  const workflowsClient = useWorkflowsClient();
+
+  // Fetch event schemas when dialog opens
+  useEffect(() => {
+    if (!open || !workflowName) return;
+
+    const fetchEventSchemas = async (): Promise<void> => {
+      setLoading(true);
+      setSendError(null);
+      try {
+        const response = await getWorkflowsByNameEvents({
+          client: workflowsClient,
+          path: { name: workflowName },
+        });
+
+        const data = response.data;
+        if (!data) {
+          setEventSchemas([]);
+          return;
+        }
+        if (!data.events) {
+          setEventSchemas([]);
+          return;
+        }
+
+        setEventSchemas(data.events);
+
+        // Auto-select first event if available
+        if (data.events && data.events.length > 0) {
+          const firstEvent = data.events[0];
+          const title = firstEvent.title as string;
+          setSelectedEventType(title || null);
+        }
+      } catch (error) {
+        console.error("Failed to fetch event schemas:", error);
+        setSendError(
+          error instanceof Error ? error.message : "Failed to fetch events",
+        );
+        setEventSchemas([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void fetchEventSchemas();
+  }, [open, workflowName, workflowsClient]);
+
+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      setSelectedEventType(null);
+      setEventData({});
+      setSchemaErrors(null);
+      setSendError(null);
+      setSendSuccess(false);
+    }
+  }, [open]);
+
+  // Reset event data when event type changes
+  useEffect(() => {
+    setEventData({});
+    setSendError(null);
+    setSendSuccess(false);
+  }, [selectedEventType]);
+
+  const selectedSchema = useMemo(() => {
+    if (!selectedEventType) return null;
+    return (
+      eventSchemas.find((schema) => schema.title === selectedEventType) || null
+    );
+  }, [selectedEventType, eventSchemas]);
+
+  const hasSchemaErrors = useMemo(() => {
+    if (!schemaErrors) return false;
+    return Object.values(schemaErrors).some((error) => error !== null);
+  }, [schemaErrors]);
+
+  const handleSendEvent = async () => {
+    if (!handlerId || !selectedEventType) return;
+
+    setSending(true);
+    setSendError(null);
+    setSendSuccess(false);
+
+    try {
+      const payload = {
+        type: selectedEventType,
+        data: eventData,
+      };
+
+      const { error } = await postEventsByHandlerId({
+        client: workflowsClient,
+        path: { handler_id: handlerId },
+        body: {
+          event: JSON.stringify(payload),
+        },
+      });
+
+      if (error) {
+        throw new Error(
+          typeof error === "string" ? error : JSON.stringify(error),
+        );
+      }
+
+      setSendSuccess(true);
+
+      // Close dialog after a short delay to show success message
+      setTimeout(() => {
+        setOpen(false);
+      }, 1000);
+    } catch (error) {
+      console.error("Failed to send event:", error);
+      setSendError(
+        error instanceof Error ? error.message : "Failed to send event",
+      );
+    } finally {
+      setSending(false);
+    }
+  };
+
+  const canSend =
+    !sending &&
+    !hasSchemaErrors &&
+    selectedEventType &&
+    handlerId &&
+    !sendSuccess;
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={disabled || !handlerId || !workflowName}
+          title={
+            !handlerId
+              ? "No active handler"
+              : !workflowName
+                ? "No workflow selected"
+                : "Send event to workflow"
+          }
+        >
+          <Send className="h-4 w-4 mr-2" />
+          Send Event
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Send Event to Workflow</DialogTitle>
+          <DialogDescription>
+            Send a custom event to the running workflow handler.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {loading ? (
+            <div className="text-center text-muted-foreground">
+              Loading event types...
+            </div>
+          ) : eventSchemas.length === 0 ? (
+            <div className="text-center text-muted-foreground">
+              {sendError || "No events available for this workflow"}
+            </div>
+          ) : (
+            <>
+              {/* Event Type Selector */}
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Event Type</label>
+                <Select
+                  value={selectedEventType || ""}
+                  onValueChange={setSelectedEventType}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select event type..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {eventSchemas.map((schema) => (
+                      <SelectItem
+                        key={schema.title || "unknown"}
+                        value={schema.title || ""}
+                      >
+                        {schema.title || "Unnamed Event"}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* Event Data Editor */}
+              {selectedSchema && (
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Event Data</label>
+                  <JsonSchemaEditor
+                    schema={{
+                      properties: selectedSchema.properties as Record<
+                        string,
+                        {
+                          type?: string;
+                          title?: string;
+                          description?: string;
+                        }
+                      >,
+                      required: selectedSchema.required,
+                    }}
+                    values={eventData}
+                    onChange={setEventData}
+                    onErrorsChange={setSchemaErrors}
+                    className="space-y-3 border border-border rounded-lg p-4 bg-muted/30"
+                  />
+                </div>
+              )}
+
+              {/* Error Messages */}
+              {sendError && (
+                <div className="text-destructive text-sm p-3 bg-destructive/10 border border-destructive/20 rounded">
+                  {sendError}
+                </div>
+              )}
+
+              {/* Success Message */}
+              {sendSuccess && (
+                <div className="text-green-600 text-sm p-3 bg-green-50 border border-green-200 rounded">
+                  Event sent successfully!
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSendEvent} disabled={!canSend}>
+            {sending ? "Sending..." : "Send Event"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/workflow-config-panel.tsx

@@ -0,0 +1,247 @@
+import { useState, useEffect } from "react";
+import {
+  useWorkflowsClient,
+  Button,
+  Textarea,
+  Skeleton,
+  useWorkflow,
+  useHandlers,
+} from "@llamaindex/ui";
+import { PanelRightClose } from "lucide-react";
+import { JsonSchemaEditor } from "./json-schema-editor";
+import { getWorkflowsByNameSchema } from "@llamaindex/workflows-client";
+
+export type JSONValue =
+  | null
+  | string
+  | number
+  | boolean
+  | { [key: string]: JSONValue }
+  | Array<JSONValue>;
+
+interface WorkflowConfigPanelProps {
+  selectedWorkflow: string;
+  onRunStart: (handlerId: string) => void;
+  activeHandlerId: string | null;
+  onCollapse?: () => void;
+}
+
+interface SchemaProperty {
+  type: string;
+  title?: string;
+  description?: string;
+}
+
+interface Schema {
+  properties?: Record<string, SchemaProperty>;
+  required?: string[];
+}
+
+export function WorkflowConfigPanel({
+  selectedWorkflow,
+  onRunStart,
+  onCollapse,
+}: WorkflowConfigPanelProps) {
+  const [schema, setSchema] = useState<Schema | null>(null);
+  const [formData, setFormData] = useState<{ [key: string]: JSONValue }>({});
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [rawInput, setRawInput] = useState<string>("");
+  const [rawInputError, setRawInputError] = useState<string | null>(null);
+  const [rawJsonErrors, setRawJsonErrors] = useState<
+    Record<string, string | null>
+  >({});
+  const [isCreating, setIsCreating] = useState(false);
+
+  const workflowsClient = useWorkflowsClient();
+  const { createHandler } = useWorkflow(selectedWorkflow);
+  const { setHandler } = useHandlers();
+
+  useEffect(() => {
+    const fetchSchema = async () => {
+      if (!selectedWorkflow) return;
+
+      try {
+        setLoading(true);
+        setError(null);
+        const { data, error } = await getWorkflowsByNameSchema({
+          client: workflowsClient,
+          path: { name: selectedWorkflow },
+        });
+        if (data) {
+          setSchema((data as { start?: Schema | null })?.start ?? null);
+        } else {
+          throw new Error(error ? String(error) : "Failed to fetch schema");
+        }
+        setFormData({});
+        setRawInput(JSON.stringify({}, null, 2));
+        setRawInputError(null);
+        setRawJsonErrors({});
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to fetch schema");
+        setSchema(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (selectedWorkflow) {
+      fetchSchema();
+    } else {
+      setSchema(null);
+      setFormData({});
+      setRawInput("");
+      setRawInputError(null);
+      setRawJsonErrors({});
+    }
+  }, [selectedWorkflow, workflowsClient]);
+
+  const handleRunWorkflow = async () => {
+    if (!selectedWorkflow) return;
+
+    try {
+      setIsCreating(true);
+      const handler = await createHandler(formData);
+      setHandler(handler);
+      onRunStart(handler.handler_id);
+
+      // Auto-collapse the config panel after starting a run
+      if (onCollapse) {
+        onCollapse();
+      }
+    } catch (err) {
+      console.error("Failed to run workflow:", err);
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const hasSchemaFields = Boolean(
+    schema?.properties && Object.keys(schema.properties).length > 0,
+  );
+
+  if (!selectedWorkflow) {
+    return (
+      <div className="h-full flex flex-col">
+        <div className="p-4 border-b border-border flex items-center justify-between">
+          <h2 className="font-semibold text-sm">Workflow Configuration</h2>
+          {onCollapse && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onCollapse}
+              title="Hide configuration panel (Ctrl+B)"
+            >
+              <PanelRightClose className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+        <div className="flex-1 flex items-center justify-center">
+          <p className="text-muted-foreground text-center">
+            Select a workflow to configure and run
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="p-4 border-b border-border flex items-center justify-between">
+        <h2 className="font-semibold text-sm">Configure: {selectedWorkflow}</h2>
+        {onCollapse && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onCollapse}
+            title="Hide configuration panel (Ctrl+B)"
+          >
+            <PanelRightClose className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {loading && (
+          <div className="space-y-4">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-20 w-full" />
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-20 w-full" />
+          </div>
+        )}
+
+        {error && (
+          <div className="text-destructive text-sm p-3 bg-destructive/10 border border-destructive/20 rounded">
+            Error loading schema: {error}
+          </div>
+        )}
+
+        {!loading && !error && (
+          <>
+            {/* Form Fields */}
+            <div className="space-y-4">
+              {hasSchemaFields ? (
+                <JsonSchemaEditor
+                  schema={schema}
+                  values={formData}
+                  onChange={setFormData}
+                  onErrorsChange={setRawJsonErrors}
+                />
+              ) : (
+                <div className="space-y-2">
+                  <label htmlFor="raw-input" className="text-sm font-medium">
+                    Input (JSON)
+                  </label>
+                  <Textarea
+                    id="raw-input"
+                    value={rawInput}
+                    onChange={(e) => {
+                      setRawInput(e.target.value);
+                      try {
+                        const parsed = JSON.parse(e.target.value);
+                        setFormData(parsed);
+                        setRawInputError(null);
+                      } catch {
+                        // Keep editing raw input until valid JSON
+                        setRawInputError("Invalid JSON");
+                      }
+                    }}
+                    placeholder='{"key": "value"}'
+                    className={`font-mono ${rawInputError ? "border-destructive focus-visible:ring-destructive" : ""}`}
+                    rows={8}
+                  />
+                  {rawInputError && (
+                    <p className="text-xs text-destructive mt-1">
+                      {rawInputError}
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Footer with Run Button */}
+      {!loading && !error && (
+        <div className="p-4 border-t border-border">
+          {Object.values(rawJsonErrors).some((e) => e) && (
+            <p className="text-xs text-destructive mb-2">
+              Fix invalid JSON fields before running.
+            </p>
+          )}
+          <Button
+            onClick={handleRunWorkflow}
+            disabled={isCreating || Object.values(rawJsonErrors).some((e) => e)}
+            className="w-full"
+          >
+            {isCreating ? "Starting..." : "Run Workflow"}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}