feat: add WebChat adapter for pipeline debugging

[devin-ai-integration]

Add WebChat Adapter for Pipeline Debugging

Overview

This PR implements a comprehensive pipeline debugging feature for LangBot by adding a WebChat adapter that allows users to test and debug pipelines directly from the web interface.

Features Added

Backend Implementation

• WebChatAdapter: New message platform adapter specifically designed for debugging purposes

  • Handles debug messages for both private chat (webchatperson) and group chat (webchatgroup) sessions
  • Integrates with existing pipeline processing flow
  • Stores debug message history in memory for testing sessions

• Debug HTTP API: New API endpoints under /api/v1/debug/webchat/

  • POST /send - Send debug messages to pipeline
  • GET /messages/{session_type} - Retrieve message history
  • POST /reset/{session_type} - Reset debug session
  • GET /pipelines - List available pipelines

• Auto-initialization: Default WebChat bot is automatically created during database initialization and bound to the default pipeline

Frontend Implementation

• Debug Dialog: New React component for pipeline debugging interface

  • Pipeline selection dropdown
  • Session type switching (Private Chat / Group Chat)
  • Real-time message display with user/bot message differentiation
  • Message input with send functionality
  • Session reset capability

• Pipeline Card Integration: Added debug button to each pipeline card for easy access to debugging functionality

• Internationalization: Complete Chinese language support for all debug interface elements

Technical Details

Architecture

• Follows existing LangBot adapter patterns and component discovery system
• Uses fixed session IDs for consistent testing: webchatperson and webchatgroup
• Integrates with existing query pool and pipeline processing infrastructure
• Maintains message history per session type for debugging continuity

Code Quality

• Passes all linting checks (ruff for backend, ESLint for frontend)
• Follows existing code conventions and patterns
• Proper error handling and user feedback
• TypeScript type safety throughout frontend implementation

Testing

The implementation has been tested locally with both backend and frontend servers running successfully. The debug interface allows users to:

1. Select any available pipeline for testing
2. Switch between private and group chat contexts
3. Send messages and receive pipeline responses
4. Reset conversation history as needed
5. View message history with proper formatting

User Experience

• Intuitive debug button on each pipeline card
• Clean, responsive dialog interface matching existing design patterns
• Real-time message updates with proper scrolling behavior
• Clear visual distinction between user and bot messages
• Comprehensive Chinese translations for all interface elements

---

Link to Devin run: https://app.devin.ai/sessions/5b29b01f9bac47fe8ca72442cc83aa2d

Requested by: Junyan Qin (Chin), "秦骏言" in Chinese, you can call me my english name Rock Chin. ([email protected])

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring