DOCSEARCHbyAlgolia
Submit Docs

Elsa Studio

repository·main·Indexed 43 days ago

https://github.com/elsa-workflows/elsa-studio

A modular and extensible application framework built with MudBlazor for managing Elsa workflows and related entities. It includes a dashboard shell, workflow designer, diagnostics, and AI integration via the Weaver workspace, supporting both Blazor Server and Blazor Server WASM hosts.

Tokens
99.2K
Snippets
165
Records
480
Agent score
55%

What's inside Elsa Studio

  1. Overview of the Diagnostics Structured Logs Studio Module

    main

    The Elsa.Studio.Diagnostics.StructuredLogs module is a dense operational viewer for structured logs within Elsa Studio. It provides semantic inspection of log events, including event IDs, message templates, named properties, scopes, exception details, trace/span IDs, and workflow/tenant metadata.

    Key features include:

    • Real-time monitoring: Uses SignalR for live log streaming.
    • Semantic inspection: Detailed views for structured data and raw JSON output.
    • Filtering: Source-aware filtering and URL-based query parameters for shareable filtered views.
    • Integration: Links to workflow instances and supports high-density event scanning (up to 10,000 events) with pruning.

  2. Overview of Elsa Studio Weaver (Elsa.Studio.AI)

    main

    The Elsa.Studio.AI module integrates the Weaver workspace into Elsa Studio. It provides an interface for AI-driven interactions within the Studio environment.

    Crucially, the Studio client does not communicate directly with AI provider SDKs or external providers. Instead, it relies entirely on Elsa Core-owned endpoints to proxy all AI operations. This ensures that provider credentials and logic remain server-side.

  3. Overview of the Diagnostics Console Logs Studio Module

    main

    The Elsa.Studio.Diagnostics.ConsoleLogs module provides a terminal-like diagnostic interface within Elsa Studio. It exposes raw stdout/stderr logs at the /diagnostics/console route.

    Key features include:

    • Live Streaming: Connects to an authenticated SignalR stream for real-time log updates.
    • Backfill: Loads recent log lines via a typed backend API client.
    • Filtering: Supports filtering by source, stream, text, and time.
    • Viewer Controls: Includes follow-tail, pause/resume, wrap, compact mode, and raw ANSI display controls.
    • State Management: Preserves view state (filters, wrapping, etc.) via URL query parameters.
    • Performance: Uses a bounded local in-memory buffer to maintain responsiveness even with high log volumes (up to 10,000 lines).

  4. Understand the Elsa.Studio bundle composition

    main

    The Elsa.Studio bundle is a collection of packages that provides a complete dashboard experience. It includes modules for the dashboard shell, authentication UI and themes, workflow management, diagnostics (ConsoleLogs, OpenTelemetry, StructuredLogs), secrets management, and the core shell.

    Key Behaviors:

    • Dashboard Shell: The Elsa.Studio.Dashboard package provides the main shell.
    • Conditional Widget Registration: Workflow and diagnostics dashboard widgets are only registered by their companion modules if the selected backend advertises matching dashboard shell features.
    • Authentication UI: Elsa.Studio.Authentication.UI provides the shared login-theme framework and default presentations (classic or classic-unified), as well as an optional classic-brand-canvas presentation.
    • Modern Themes: First-party modern authentication presentations are contained in Elsa.Studio.Authentication.Themes and must be explicitly registered.

  6. Overview of the State Machine Designer implementation

    main

    The State Machine Designer is a dedicated Studio-side designer for the backend Elsa.StateMachine activity. Unlike the standard Flowchart designer, this implementation provides a specialized diagram view that maps state-machine JSON into a graph consisting of state nodes and transition route cards.

    Key features include:

    • Dedicated Provider: Uses a StateMachineDiagramDesignerProvider to register the designer specifically for Elsa.StateMachine activities.
    • Isolated UX: The designer is kept separate from the full-screen root Flowchart designer to prevent unnecessary re-renders and maintain performance.
    • Slot Editing: Supports editing transition slots (trigger, condition, action) and state slots (entry, exit) using existing Studio editing patterns.
    • Graph Mapping: Uses state names as the primary identity for the graph, as backend transitions reference from and to names.

  7. Overview of the Weaver Copilot UI Module

    main

    The Weaver Copilot UI is a modular Elsa Studio AI module (Elsa.Studio.AI) that provides an operational workspace for Weaver. It is designed to be provider-neutral, meaning it does not include provider-specific SDKs. Instead, it discovers Elsa Core AI capabilities and tools via backend endpoints and streams chat interactions through Server-Sent Events (SSE) from the /ai/chat endpoint.

    Key features include:

    • Capability Discovery: Uses /ai/capabilities to determine available Weaver controls and features.
    • Real-time Streaming: Incremental streaming of assistant deltas via SSE.
    • Activity Rendering: Displays assistant, tool, and proposal activities.
    • Contextual Awareness: Supports context references within the workspace.
    • Modular Integration: Isolated under its own module with explicit registration, menu items, and route ownership.

  9. Understand the `src/bpmn` module architecture

    main

    The src/bpmn module serves as a canvas-neutral BPMN view model. It contains the core logic for representing a BPMN diagram regardless of the rendering engine used (e.g., X6 or React Flow).

    Key Design Principles:

    • Adapter Neutrality: If logic would be identical in both an X6 adapter and a React Flow adapter, it belongs in this module.
    • Pure TypeScript: This module is strictly decoupled from UI frameworks. It must not import @antv/x6, @xyflow/react, react, or any designer-specific modules.
    • Read-Only: This module is responsible for reading and projecting data. It does not handle the save path; mutations happen to the original document in place, and the entire document is sent back to the server.

  10. Understand the styling boundary for Authentication Themes

    main

    The authentication themes package is designed with a strict styling boundary. The login-themes.css file only sets documented --elsa-login-* CSS variables and styles the package's outer composition. It does not select into the shared login panel (which is managed by Elsa.Studio.Authentication.UI).

    When creating custom themes, you should follow this same pattern: only use the provided CSS variables and avoid selecting into the shared login panel components to ensure compatibility.

  11. Understand the responsibilities of RemoteServerLogService

    main

    The RemoteServerLogService acts as the bridge between the backend API and the UI. Its primary responsibilities include:

    • Loading sources: Fetching the list of available log sources.
    • Loading recent logs: Fetching logs and mapping the provided filters to the backend request.
    • Clamping requests: Ensuring the client-requested Take count does not exceed the UI row capacity.
    • Error handling: Converting backend errors into specific UI states, such as unavailable, unauthorized, disconnected, or validation error.

  12. How Blazor WebAssembly authentication works

    main

    This module implements JWT-based authentication specifically for the Blazor WebAssembly runtime.

    Key Characteristics

    • Token Storage: Uses Blazored.LocalStorage to store tokens in the browser's local storage. This ensures tokens persist across sessions and page refreshes.
    • No Prerendering: Unlike Blazor Server, this implementation does not need to handle server-side prerendering or IHttpContextAccessor because the entire app runs in the browser.
    • Automatic Token Injection: Once configured, the ElsaIdentityAuthenticatingApiHttpMessageHandler automatically attaches JWT bearer tokens to outgoing HTTP requests directed at the Elsa backend.

    Security Note

    Tokens are stored in local storage, making them accessible to JavaScript. To mitigate XSS risks, it is recommended to use HTTPS, implement short token lifetimes with refresh tokens, and use strict Content Security Policies (CSP).