Chat UI Workflow Interaction

Chat UI Workflow Interaction

Overview

Implement chat-based user interface workflows with selectable options, progressive disclosure, context-aware suggestions, and workflow guidance. This skill applies to all discipline-specific chat interactions where users select from options rather than typing free-form commands.

Announce at start: "I'm using the chat-ui-workflow-interaction skill for chat-based workflow implementation."

When to Use This Skill

Trigger Conditions:

• Implementing chat thread UI with selectable option buttons
• Designing progressive disclosure workflows (multi-step wizards via chat)
• Creating context-aware action suggestions based on workflow state
• Building discipline-specific chatbots (procurement, civil engineering, etc.)

Prerequisites:

• Domain workflow specification available (e.g., procurement 5-phase flow, civil engineering workflows)
• UI component library accessible
• Agent capabilities defined for the discipline
• User roles and permissions established

Chat UI Architecture

Message Types

Progressive Disclosure Pattern

USER INITIALIZES → Agent presents context-appropriate options
  ↓
USER SELECTS OPTION → Agent gathers required inputs via sequential prompts
  ↓
ALL INPUTS COLLECTED → Agent presents summary with confirmation options
  ↓
USER CONFIRMS → Agent executes with progress updates
  ↓
EXECUTION COMPLETE → Agent presents next-action options or return to main menu

Implementation Procedure

Step 1: Workflow State Definition

Define the chat workflow states and transitions:

{
  "workflow": "procurement_order_creation",
  "states": {
    "main_menu": {
      "prompt": "What would you like to do?",
      "options": [
        {"label": "Create New Order", "action": "create_order", "next_state": "order_type_selection"},
        {"label": "Track Existing Order", "action": "track_order", "next_state": "order_tracking"},
        {"label": "Supplier Directory", "action": "supplier_directory", "next_state": "supplier_search"},
        {"label": "Approval Queue", "action": "approval_queue", "next_state": "pending_approvals"}
      ]
    },
    "order_type_selection": {
      "prompt": "Select order type:",
      "options": [
        {"label": "🛒 Purchase Order", "action": "po", "next_state": "phase1_basic_info"},
        {"label": "🔧 Work Order", "action": "wo", "next_state": "phase1_basic_info"},
        {"label": "⚡ Service Order", "action": "so", "next_state": "phase1_basic_info"}
      ]
    },
    "phase1_basic_info": {
      "prompt": "Phase 1 of 5 — Basic Information",
      "fields": ["order_title", "department", "cost_center", "priority", "required_date"],
      "validation": ["required_fields", "valid_cost_center", "date_in_future"],
      "next_state": "phase2_template_selection"
    }
  }
}

Step 2: Option Group Design

Option Display Rules:

• Maximum 5 options per message to avoid cognitive overload
• Use emojis or icons for quick visual scanning
• Group related options under section headers
• Include "Back" or "Main Menu" option for navigation escape

Option Context Awareness:

• Filter options based on user role and permissions
• Disable unavailable options with explanation ("Not available: No active orders")
• Highlight time-sensitive options ("⚠️ 3 orders awaiting approval")

Step 3: Progressive Disclosure Implementation

Per-Phase Chat Structure:

Phase N of 5 — [Phase Name]
├── Prompt: "Please provide [specific information]"
├── Input: [text field / dropdown / file upload / date picker]
├── Validation: Real-time check
├── Feedback: "✓ Valid" or "✗ [error message + how to fix]"
├── Progress: [██████░░░░] 60% complete
└── Navigation: [← Back] [Next →] or [Submit]

Step 4: HITL Integration in Chat

Human Escalation Points:

[When order value > threshold]
Agent: "This order value ($125,000) requires manager approval."
Options: [Continue to Manager] [Save Draft] [Cancel]

[When confidence is low]
Agent: "I'm not confident about the quantity for this item. BOQ shows 450 units but your input was 500."
Options: [Use BOQ: 450] [Keep My Input: 500] [Review Drawing] [Discuss with Engineer]

[When specialist input needed]
Agent: "This structural steel specification requires engineer confirmation."
Options: [Send to Structural Engineer] [Continue (Engineer Review Later)] [Pause]

Step 5: Error Handling in Chat

Step 6: Multi-Discipline Chat Context

Context Switching: When user switches between disciplines within the same chat thread:

User switches from Procurement to Civil Engineering:
Agent: "Switching context to Civil Engineering. Previous procurement session saved."
Options: [Start New Task] [Resume Saved Session] [Return to Main Menu]

Context Memory:

• Maintain session state across message turns
• Preserve context when switching between related tasks
• Offer to resume interrupted workflows

Success Criteria

• All workflow states defined with transitions
• Option groups limited to 5 or fewer per message
• Progressive disclosure implemented per workflow specification
• HITL escalation points configured with appropriate options
• Error handling covers all validation failure modes
• Navigation includes escape hatches (Back, Main Menu)
• User role filtering applied to available options
• Session state persisted across chat interactions

Common Pitfalls

1. Too Many Options — More than 5 options overwhelms users. Group into nested menus instead.
2. No Escape Hatch — Always provide Back and Main Menu options to prevent user being trapped.
3. Lost Context — When users switch tasks, preserve session state so they can resume.
4. Missing Validation Feedback — Show immediate feedback on input errors, not after submission.
5. Role-Agnostic Options — Filter options based on user permissions; don't show actions they can't perform.
6. Ambiguous Option Labels — Use clear, action-oriented labels. "Create Purchase Order" is better than "PO".

Cross-References

Related Skills

• workflow-implementation — Workflow design patterns
• procurement-order-management — Procurement-specific workflow
• procurement-5phase-order-creation — 5-phase wizard flow

Related Agents

• Procurement Officer — Primary user of procurement chat flows
• Civil Engineer — Primary user of civil engineering chat flows
• QualityForge Reviewer — Reviews workflow implementations