542 lines
27 KiB
Markdown
542 lines
27 KiB
Markdown
# Chat Playground and Workflow Live Tracking Frontend Documentation
|
|
|
|
This document describes customer journeys for managing chat playground workflows and live tracking workflow execution through the frontend, focusing on how users interact with workflow management and how the backend routes support these experiences. All UI components are dynamically generated from backend metadata—no hardcoding required.
|
|
|
|
## Table of Contents
|
|
|
|
1. [Overview](#overview)
|
|
2. [Customer Journey 1: Starting a New Workflow](#customer-journey-1-starting-a-new-workflow)
|
|
3. [Customer Journey 2: Continuing an Existing Workflow](#customer-journey-2-continuing-an-existing-workflow)
|
|
4. [Customer Journey 3: Live Tracking Workflow Progress](#customer-journey-3-live-tracking-workflow-progress)
|
|
5. [Customer Journey 4: Stopping a Running Workflow](#customer-journey-4-stopping-a-running-workflow)
|
|
6. [Customer Journey 5: Deleting Context from a Workflow](#customer-journey-5-deleting-context-from-a-workflow)
|
|
|
|
---
|
|
|
|
## Overview
|
|
|
|
The chat playground routes (`/api/chat/playground`) and workflow routes (`/api/workflows`) enable users to create, manage, and track AI-powered workflows that process user requests through task planning and action execution. These routes support **workflow lifecycle management** including creation, live tracking, modification, and deletion.
|
|
|
|
**Key Principles:**
|
|
- **User-Centric**: Documentation organized around what users want to accomplish
|
|
- **Backend-Driven**: All forms, tables, and UI components generated from backend metadata
|
|
- **No Hardcoding**: Field definitions, labels, validation rules, and options come from the backend
|
|
- **Permission-Aware**: Backend enforces permissions; frontend handles gracefully
|
|
- **User-Scoped**: Users can only see and manage their own workflows
|
|
- **Real-Time Updates**: Polling-based live tracking for workflow progress
|
|
|
|
---
|
|
|
|
## Customer Journey 1: Starting a New Workflow
|
|
|
|
### User Goal
|
|
"I want to start a new AI workflow to process my request."
|
|
|
|
### User Story
|
|
As a user, I want to start a new workflow by optionally selecting a saved prompt template, providing or editing my input prompt, choosing a workflow mode (Actionplan for traditional task planning, Dynamic for iterative processing, or Template for template-based processing), optionally enabling data neutralization for privacy compliance, and optionally attaching files, so the system can begin processing my request in the appropriate mode with sensitive data protected if needed.
|
|
|
|
### User Story Flow
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant User
|
|
participant Frontend
|
|
participant Backend
|
|
|
|
User->>Frontend: Navigate to chat playground
|
|
Frontend->>Backend: GET /api/attributes/ChatWorkflow
|
|
Backend-->>Frontend: Attribute definitions (fields, labels, types)
|
|
Frontend->>Backend: GET /api/attributes/UserInputRequest
|
|
Backend-->>Frontend: Input request field definitions
|
|
Frontend->>Frontend: Generate input form from attributes
|
|
Frontend->>Backend: GET /api/prompts
|
|
Backend-->>Frontend: Paginated prompts list
|
|
Frontend-->>User: Display chat input form with mode selector<br/>(Actionplan, Dynamic, Template)<br/>+ prompt dropdown selector
|
|
|
|
alt User optionally selects a prompt
|
|
User->>Frontend: Click prompt dropdown
|
|
Frontend->>Frontend: Display available prompts list<br/>(from cached prompts data)
|
|
User->>Frontend: Select prompt from dropdown
|
|
Frontend->>Backend: GET /api/prompts/promptId
|
|
Backend-->>Frontend: Selected prompt details<br/>(name, content)
|
|
Frontend->>Frontend: Pre-fill prompt text field with prompt content
|
|
Frontend->>Frontend: Show selected prompt name
|
|
Frontend-->>User: Display prompt text pre-filled<br/>(user can still edit)
|
|
end
|
|
|
|
User->>Frontend: Enter or edit prompt text
|
|
|
|
alt User selects workflow mode
|
|
alt User selects "Actionplan" mode
|
|
User->>Frontend: Click "Actionplan" mode option
|
|
Frontend->>Frontend: Show mode description/help text<br/>(traditional task planning)
|
|
Frontend->>Frontend: Set workflowMode to "Actionplan"
|
|
Frontend-->>User: Display selected mode indicator
|
|
else User selects "Dynamic" mode
|
|
User->>Frontend: Click "Dynamic" mode option
|
|
Frontend->>Frontend: Show mode description/help text<br/>(iterative dynamic-style processing)
|
|
Frontend->>Frontend: Set workflowMode to "Dynamic"
|
|
Frontend-->>User: Display selected mode indicator
|
|
else User selects "Template" mode
|
|
User->>Frontend: Click "Template" mode option
|
|
Frontend->>Frontend: Show mode description/help text<br/>(template-based processing)
|
|
Frontend->>Frontend: Set workflowMode to "Template"
|
|
Frontend-->>User: Display selected mode indicator
|
|
end
|
|
end
|
|
|
|
alt User optionally enables neutralization
|
|
User->>Frontend: Click "Enable Neutralization" toggle
|
|
Frontend->>Backend: GET /api/neutralization/config
|
|
Backend-->>Frontend: Neutralization config (enabled status)
|
|
alt Config exists and enabled
|
|
Frontend->>Frontend: Mark neutralization as enabled for workflow
|
|
Frontend-->>User: Show neutralization enabled indicator<br/>(uses existing config)
|
|
else Config disabled or not found
|
|
Frontend->>Frontend: Mark neutralization as disabled
|
|
Frontend-->>User: Show neutralization disabled<br/>(user can configure on settings page)
|
|
end
|
|
end
|
|
|
|
alt User optionally attaches files
|
|
alt User drags and drops files
|
|
User->>Frontend: Drag file(s) over drop zone
|
|
Frontend->>Frontend: Show visual feedback<br/>(highlight drop zone, border, overlay)
|
|
Frontend-->>User: Display drop zone active state
|
|
User->>Frontend: Drop file(s) onto drop zone
|
|
Frontend->>Frontend: Process dropped files
|
|
Frontend->>Frontend: Show file preview with name and size
|
|
Frontend->>Frontend: Optimistic update: Add file to attachment list
|
|
Frontend->>Backend: POST /api/files/upload<br/>+ multipart/form-data (file)
|
|
alt Permission denied (403)
|
|
Backend-->>Frontend: 403 Forbidden
|
|
Frontend->>Frontend: Revert optimistic update: Remove file from list
|
|
Frontend-->>User: Show permission error
|
|
else File too large (413)
|
|
Backend-->>Frontend: 413 Request Entity Too Large
|
|
Frontend->>Frontend: Revert optimistic update: Remove file from list
|
|
Frontend-->>User: Show file size error
|
|
else Success (201)
|
|
Backend-->>Frontend: FileItem object + duplicate info
|
|
Frontend->>Frontend: Keep optimistic update
|
|
Frontend->>Frontend: Store fileId for later use
|
|
Frontend-->>User: Show file attached successfully
|
|
end
|
|
else User uploads new file via button
|
|
User->>Frontend: Click "Attach File" or "Upload File" button
|
|
Frontend->>Frontend: Open file picker dialog
|
|
User->>Frontend: Select file(s) from device
|
|
Frontend->>Frontend: Show file preview with name and size
|
|
Frontend->>Frontend: Optimistic update: Add file to attachment list
|
|
Frontend->>Backend: POST /api/files/upload<br/>+ multipart/form-data (file)
|
|
alt Permission denied (403)
|
|
Backend-->>Frontend: 403 Forbidden
|
|
Frontend->>Frontend: Revert optimistic update: Remove file from list
|
|
Frontend-->>User: Show permission error
|
|
else File too large (413)
|
|
Backend-->>Frontend: 413 Request Entity Too Large
|
|
Frontend->>Frontend: Revert optimistic update: Remove file from list
|
|
Frontend-->>User: Show file size error
|
|
else Success (201)
|
|
Backend-->>Frontend: FileItem object + duplicate info
|
|
Frontend->>Frontend: Keep optimistic update
|
|
Frontend->>Frontend: Store fileId for later use
|
|
Frontend-->>User: Show file attached successfully
|
|
end
|
|
else User selects existing file
|
|
User->>Frontend: Click "Browse Files" or "Select File" button
|
|
Frontend->>Backend: GET /api/files/list
|
|
Backend-->>Frontend: Paginated files list
|
|
Frontend->>Frontend: Display file browser/selector
|
|
Frontend-->>User: Show available files
|
|
User->>Frontend: Select file(s) from list
|
|
Frontend->>Frontend: Add fileId(s) to attachment list
|
|
Frontend-->>User: Show selected files in attachment list
|
|
end
|
|
end
|
|
|
|
User->>Frontend: Click "Start Workflow" button
|
|
|
|
Frontend->>Frontend: Validate form (required fields, types, workflowMode)
|
|
alt Validation fails (missing workflowMode or prompt)
|
|
Frontend-->>User: Show validation errors<br/>(e.g., "Workflow mode is required")
|
|
else Validation passes
|
|
Frontend->>Frontend: Build UserInputRequest with listFileId array (if files attached)
|
|
alt Neutralization enabled
|
|
Frontend->>Frontend: Neutralization will be applied automatically<br/>by backend during workflow processing
|
|
end
|
|
Frontend->>Frontend: Optimistic update: Show loading state, create workflow placeholder
|
|
Frontend->>Backend: POST /api/chat/playground/start<br/>+ workflowMode query param (Actionplan/Dynamic/Template)<br/>+ UserInputRequest body<br/>(includes listFileId if files attached)
|
|
alt Permission denied (403)
|
|
Backend-->>Frontend: 403 Forbidden
|
|
Frontend->>Frontend: Revert optimistic update
|
|
Frontend-->>User: Show permission error
|
|
else Validation error (400)
|
|
Backend-->>Frontend: 400 Bad Request + error details
|
|
Frontend->>Frontend: Revert optimistic update
|
|
Frontend-->>User: Show backend validation errors
|
|
else Success (200)
|
|
Backend-->>Frontend: Created ChatWorkflow (status: "running")<br/>with files attached (if any)<br/>(neutralized if neutralization enabled)
|
|
Frontend->>Frontend: Keep optimistic update
|
|
Frontend->>Frontend: Navigate to workflow view
|
|
Frontend->>Frontend: Start polling for updates
|
|
alt Neutralization enabled
|
|
Frontend->>Frontend: Show neutralization indicator in workflow view
|
|
Frontend->>Frontend: Option to resolve text back to original when viewing
|
|
end
|
|
Frontend-->>User: Display workflow with live tracking<br/>(files visible if attached, neutralized if enabled)
|
|
end
|
|
end
|
|
```
|
|
|
|
---
|
|
|
|
## Customer Journey 2: Continuing an Existing Workflow
|
|
|
|
### User Goal
|
|
"I want to continue a workflow I started earlier by selecting it from a list and adding more input."
|
|
|
|
### User Story
|
|
As a user, I want to select a previous workflow from a dropdown on the chat interface page and continue it by providing additional input, so the system can process my new request in the context of the previous conversation.
|
|
|
|
### User Story Flow
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant User
|
|
participant Frontend
|
|
participant Backend
|
|
|
|
User->>Frontend: Navigate to chat playground
|
|
Frontend->>Backend: GET /api/attributes/ChatWorkflow
|
|
Backend-->>Frontend: Attribute definitions (fields, labels, types)
|
|
Frontend->>Backend: GET /api/attributes/UserInputRequest
|
|
Backend-->>Frontend: Input request field definitions
|
|
Frontend->>Backend: GET /api/workflows/
|
|
Backend-->>Frontend: Paginated workflows list
|
|
Frontend->>Backend: GET /api/prompts
|
|
Backend-->>Frontend: Paginated prompts list
|
|
Frontend->>Frontend: Generate input form from attributes
|
|
Frontend-->>User: Display chat input form with<br/>workflow dropdown selector<br/>+ mode selector + prompt dropdown
|
|
|
|
alt User selects previous workflow from dropdown
|
|
User->>Frontend: Click workflow dropdown
|
|
Frontend->>Frontend: Display available workflows list<br/>(from cached workflows data)
|
|
User->>Frontend: Select workflow from dropdown
|
|
Frontend->>Backend: GET /api/workflows/workflowId
|
|
Backend-->>Frontend: Selected workflow data<br/>(status, messages, workflowMode, etc.)
|
|
Frontend->>Frontend: Load workflow history
|
|
Frontend->>Frontend: Display previous messages in chat view
|
|
Frontend->>Frontend: Set workflowMode from selected workflow
|
|
Frontend->>Frontend: Show selected workflow name/ID
|
|
Frontend-->>User: Display workflow context<br/>(previous messages visible,<br/>workflow mode pre-selected)
|
|
end
|
|
|
|
alt User optionally selects a prompt
|
|
User->>Frontend: Click prompt dropdown
|
|
Frontend->>Frontend: Display available prompts list<br/>(from cached prompts data)
|
|
User->>Frontend: Select prompt from dropdown
|
|
Frontend->>Backend: GET /api/prompts/promptId
|
|
Backend-->>Frontend: Selected prompt details<br/>(name, content)
|
|
Frontend->>Frontend: Pre-fill prompt text field with prompt content
|
|
Frontend->>Frontend: Show selected prompt name
|
|
Frontend-->>User: Display prompt text pre-filled<br/>(user can still edit)
|
|
end
|
|
|
|
User->>Frontend: Enter or edit prompt text
|
|
|
|
alt User optionally enables/disables neutralization
|
|
User->>Frontend: Click "Enable Neutralization" toggle
|
|
Frontend->>Backend: GET /api/neutralization/config
|
|
Backend-->>Frontend: Neutralization config (enabled status)
|
|
alt Config exists and enabled
|
|
Frontend->>Frontend: Mark neutralization as enabled for workflow
|
|
Frontend-->>User: Show neutralization enabled indicator<br/>(uses existing config)
|
|
else Config disabled or not found
|
|
Frontend->>Frontend: Mark neutralization as disabled
|
|
Frontend-->>User: Show neutralization disabled<br/>(user can configure on settings page)
|
|
end
|
|
end
|
|
|
|
alt User optionally attaches files
|
|
alt User drags and drops files
|
|
User->>Frontend: Drag file(s) over drop zone
|
|
Frontend->>Frontend: Show visual feedback<br/>(highlight drop zone, border, overlay)
|
|
Frontend-->>User: Display drop zone active state
|
|
User->>Frontend: Drop file(s) onto drop zone
|
|
Frontend->>Frontend: Process dropped files
|
|
Frontend->>Frontend: Show file preview with name and size
|
|
Frontend->>Frontend: Optimistic update: Add file to attachment list
|
|
Frontend->>Backend: POST /api/files/upload<br/>+ multipart/form-data (file)<br/>+ workflowId (optional)
|
|
alt Permission denied (403)
|
|
Backend-->>Frontend: 403 Forbidden
|
|
Frontend->>Frontend: Revert optimistic update: Remove file from list
|
|
Frontend-->>User: Show permission error
|
|
else File too large (413)
|
|
Backend-->>Frontend: 413 Request Entity Too Large
|
|
Frontend->>Frontend: Revert optimistic update: Remove file from list
|
|
Frontend-->>User: Show file size error
|
|
else Success (201)
|
|
Backend-->>Frontend: FileItem object + duplicate info
|
|
Frontend->>Frontend: Keep optimistic update
|
|
Frontend->>Frontend: Store fileId for later use
|
|
Frontend-->>User: Show file attached successfully
|
|
end
|
|
else User uploads new file via button
|
|
User->>Frontend: Click "Attach File" or "Upload File" button
|
|
Frontend->>Frontend: Open file picker dialog
|
|
User->>Frontend: Select file(s) from device
|
|
Frontend->>Frontend: Show file preview with name and size
|
|
Frontend->>Frontend: Optimistic update: Add file to attachment list
|
|
Frontend->>Backend: POST /api/files/upload<br/>+ multipart/form-data (file)<br/>+ workflowId (optional)
|
|
alt Permission denied (403)
|
|
Backend-->>Frontend: 403 Forbidden
|
|
Frontend->>Frontend: Revert optimistic update: Remove file from list
|
|
Frontend-->>User: Show permission error
|
|
else File too large (413)
|
|
Backend-->>Frontend: 413 Request Entity Too Large
|
|
Frontend->>Frontend: Revert optimistic update: Remove file from list
|
|
Frontend-->>User: Show file size error
|
|
else Success (201)
|
|
Backend-->>Frontend: FileItem object + duplicate info
|
|
Frontend->>Frontend: Keep optimistic update
|
|
Frontend->>Frontend: Store fileId for later use
|
|
Frontend-->>User: Show file attached successfully
|
|
end
|
|
else User selects existing file
|
|
User->>Frontend: Click "Browse Files" or "Select File" button
|
|
Frontend->>Backend: GET /api/files/list
|
|
Backend-->>Frontend: Paginated files list
|
|
Frontend->>Frontend: Display file browser/selector
|
|
Frontend-->>User: Show available files
|
|
User->>Frontend: Select file(s) from list
|
|
Frontend->>Frontend: Add fileId(s) to attachment list
|
|
Frontend-->>User: Show selected files in attachment list
|
|
end
|
|
end
|
|
|
|
User->>Frontend: Click "Continue" or "Send" button
|
|
|
|
Frontend->>Frontend: Validate form (required fields, workflowMode)
|
|
alt Validation fails (missing workflowMode or prompt)
|
|
Frontend-->>User: Show validation errors<br/>(e.g., "Workflow mode is required")
|
|
else Validation passes
|
|
Frontend->>Frontend: Build UserInputRequest with listFileId array (if files attached)
|
|
alt Neutralization enabled
|
|
Frontend->>Frontend: Neutralization will be applied automatically<br/>by backend during workflow processing
|
|
end
|
|
Frontend->>Frontend: Optimistic update: Add user message to UI
|
|
Frontend->>Backend: POST /api/chat/playground/start<br/>+ workflowId query param (from selected workflow)<br/>+ workflowMode query param (from selected workflow)<br/>+ UserInputRequest body<br/>(includes listFileId if files attached)
|
|
alt Permission denied (403)
|
|
Backend-->>Frontend: 403 Forbidden
|
|
Frontend->>Frontend: Revert optimistic update
|
|
Frontend-->>User: Show permission error
|
|
else Workflow not found (404)
|
|
Backend-->>Frontend: 404 Not Found
|
|
Frontend->>Frontend: Revert optimistic update
|
|
Frontend-->>User: Show not found error
|
|
else Validation error (400)
|
|
Backend-->>Frontend: 400 Bad Request + error details
|
|
Frontend->>Frontend: Revert optimistic update
|
|
Frontend-->>User: Show backend validation errors
|
|
else Success (200)
|
|
Backend-->>Frontend: Updated ChatWorkflow (status: "running")<br/>with new files attached (if any)<br/>(neutralized if neutralization enabled)
|
|
Frontend->>Frontend: Keep optimistic update
|
|
Frontend->>Frontend: Navigate to workflow view or update current view
|
|
Frontend->>Frontend: Start/continue polling for updates
|
|
alt Neutralization enabled
|
|
Frontend->>Frontend: Show neutralization indicator in workflow view
|
|
Frontend->>Frontend: Option to resolve text back to original when viewing
|
|
end
|
|
Frontend-->>User: Display updated workflow with new input<br/>(files visible if attached, neutralized if enabled)
|
|
end
|
|
end
|
|
```
|
|
|
|
---
|
|
|
|
## Customer Journey 3: Live Tracking Workflow Progress
|
|
|
|
### User Goal
|
|
"I want to see real-time updates as my workflow processes my request."
|
|
|
|
### User Story
|
|
As a user, I want to see live updates including new messages, execution logs, and statistics as my workflow processes, so I can monitor progress and understand what the system is doing.
|
|
|
|
### User Story Flow
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant User
|
|
participant Frontend
|
|
participant Backend
|
|
|
|
User->>Frontend: View active workflow
|
|
Frontend->>Frontend: Start polling interval (e.g., every 2 seconds)
|
|
|
|
loop Polling cycle
|
|
Frontend->>Backend: GET /api/chat/playground/workflowId/chatData<br/>+ afterTimestamp query param (optional)
|
|
alt Workflow not found (404)
|
|
Backend-->>Frontend: 404 Not Found
|
|
Frontend->>Frontend: Stop polling
|
|
Frontend-->>User: Show error, navigate away
|
|
else Success (200)
|
|
Backend-->>Frontend: Unified chat data<br/>{messages: [], logs: [], stats: []}<br/>(chronologically ordered by _createdAt)
|
|
Frontend->>Frontend: Compare with existing data
|
|
alt New data available
|
|
Frontend->>Frontend: Append new messages to chat view
|
|
Frontend->>Frontend: Append new logs to log panel
|
|
Frontend->>Frontend: Update statistics display
|
|
Frontend->>Frontend: Update workflow status indicator
|
|
Frontend->>Frontend: Scroll to latest content (if auto-scroll enabled)
|
|
Frontend-->>User: Display new messages, logs, stats
|
|
else No new data
|
|
Frontend->>Frontend: Continue polling silently
|
|
end
|
|
|
|
alt Workflow status is "completed" or "stopped" or "failed"
|
|
Frontend->>Frontend: Stop polling
|
|
Frontend->>Frontend: Show final status
|
|
Frontend-->>User: Display completed workflow
|
|
end
|
|
end
|
|
end
|
|
|
|
alt User manually stops polling
|
|
User->>Frontend: Navigate away or close tab
|
|
Frontend->>Frontend: Stop polling interval
|
|
end
|
|
```
|
|
|
|
---
|
|
|
|
## Customer Journey 4: Stopping a Running Workflow
|
|
|
|
### User Goal
|
|
"I want to stop a workflow that is currently running."
|
|
|
|
### User Story
|
|
As a user, I want to stop a running workflow by clicking a stop button, so I can halt processing if I no longer need the results or if something is taking too long.
|
|
|
|
### User Story Flow
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant User
|
|
participant Frontend
|
|
participant Backend
|
|
|
|
User->>Frontend: View running workflow
|
|
Frontend->>Frontend: Display "Stop" button
|
|
User->>Frontend: Click "Stop" button
|
|
|
|
Frontend->>Frontend: Show confirmation dialog<br/>"Stop this workflow?"
|
|
alt User cancels
|
|
User->>Frontend: Click "Cancel"
|
|
Frontend->>Frontend: Close dialog
|
|
Frontend-->>User: Dialog closed, workflow continues
|
|
else User confirms
|
|
User->>Frontend: Click "Confirm"
|
|
Frontend->>Frontend: Optimistic update: Update status to "stopping"
|
|
Frontend->>Backend: POST /api/chat/playground/workflowId/stop
|
|
alt Permission denied (403)
|
|
Backend-->>Frontend: 403 Forbidden
|
|
Frontend->>Frontend: Revert optimistic update
|
|
Frontend-->>User: Show permission error
|
|
else Workflow not found (404)
|
|
Backend-->>Frontend: 404 Not Found
|
|
Frontend->>Frontend: Revert optimistic update
|
|
Frontend-->>User: Show not found error
|
|
else Success (200)
|
|
Backend-->>Frontend: Updated ChatWorkflow (status: "stopped")
|
|
Frontend->>Frontend: Keep optimistic update
|
|
Frontend->>Frontend: Stop polling for updates
|
|
Frontend->>Backend: GET /api/workflows/workflowId (refetch)
|
|
Backend-->>Frontend: Final workflow state
|
|
Frontend->>Frontend: Update UI with stopped status
|
|
Frontend-->>User: Show stopped workflow with final state
|
|
end
|
|
end
|
|
```
|
|
|
|
---
|
|
|
|
## Customer Journey 5: Deleting Context from a Workflow
|
|
|
|
### User Goal
|
|
"I want to remove messages or files from a workflow to clean up the context."
|
|
|
|
### User Story
|
|
As a user, I want to delete individual messages or files attached to messages in a workflow, so I can remove unwanted context and keep the workflow focused on what's relevant.
|
|
|
|
### User Story Flow
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant User
|
|
participant Frontend
|
|
participant Backend
|
|
|
|
alt User deletes message from workflow
|
|
User->>Frontend: View workflow with messages
|
|
User->>Frontend: Click "Delete" button on message
|
|
Frontend->>Frontend: Show confirmation dialog<br/>"Delete this message?<br/>This will remove it from the workflow context."
|
|
alt User cancels
|
|
User->>Frontend: Click "Cancel"
|
|
Frontend->>Frontend: Close dialog
|
|
Frontend-->>User: Dialog closed, message remains
|
|
else User confirms
|
|
User->>Frontend: Click "Confirm" or "Delete"
|
|
Frontend->>Frontend: Optimistic update: Remove message from UI
|
|
Frontend->>Backend: DELETE /api/workflows/workflowId/messages/messageId
|
|
alt Permission denied (403)
|
|
Backend-->>Frontend: 403 Forbidden
|
|
Frontend->>Frontend: Revert optimistic update: Restore message
|
|
Frontend-->>User: Show permission error
|
|
else Message not found (404)
|
|
Backend-->>Frontend: 404 Not Found
|
|
Frontend->>Frontend: Revert optimistic update: Restore message
|
|
Frontend-->>User: Show not found error
|
|
else Success (200)
|
|
Backend-->>Frontend: Success response<br/>{workflowId, messageId, message: "Message deleted successfully"}
|
|
Frontend->>Frontend: Keep optimistic update
|
|
Frontend->>Backend: GET /api/workflows/workflowId (refetch)
|
|
Backend-->>Frontend: Updated workflow (messageIds updated)
|
|
Frontend->>Frontend: Update UI with fresh workflow data
|
|
Frontend-->>User: Show message removed from workflow
|
|
end
|
|
end
|
|
end
|
|
|
|
alt User deletes file from message
|
|
User->>Frontend: View message with file attachments
|
|
User->>Frontend: Click "Delete" button on file attachment
|
|
Frontend->>Frontend: Show confirmation dialog<br/>"Delete this file?<br/>This will remove it from the message context."
|
|
alt User cancels
|
|
User->>Frontend: Click "Cancel"
|
|
Frontend->>Frontend: Close dialog
|
|
Frontend-->>User: Dialog closed, file remains
|
|
else User confirms
|
|
User->>Frontend: Click "Confirm" or "Delete"
|
|
Frontend->>Frontend: Optimistic update: Remove file from UI
|
|
Frontend->>Backend: DELETE /api/workflows/workflowId/messages/messageId/files/fileId
|
|
alt Permission denied (403)
|
|
Backend-->>Frontend: 403 Forbidden
|
|
Frontend->>Frontend: Revert optimistic update: Restore file
|
|
Frontend-->>User: Show permission error
|
|
else File not found (404)
|
|
Backend-->>Frontend: 404 Not Found
|
|
Frontend->>Frontend: Revert optimistic update: Restore file
|
|
Frontend-->>User: Show not found error
|
|
else Success (200)
|
|
Backend-->>Frontend: Success response<br/>{workflowId, messageId, fileId, message: "File reference deleted successfully"}
|
|
Frontend->>Frontend: Keep optimistic update
|
|
Frontend->>Backend: GET /api/workflows/workflowId/messages/messageId (refetch)
|
|
Backend-->>Frontend: Updated message (files list updated)
|
|
Frontend->>Frontend: Update UI with fresh message data
|
|
Frontend-->>User: Show file removed from message
|
|
end
|
|
end
|
|
end
|
|
```
|
|
|