@llamaindex/workflow-debugger 0.2.0 → 0.2.1

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

@@ -1,299 +0,0 @@
-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

@@ -1,247 +0,0 @@
-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>
-  );
-}