Hi @berviantoleo and @cnu1812

I'd like to work on integrating the WebSocket streaming endpoint (from PR #68) with the frontend UI. After reviewing the codebase, I have a clear understanding of the implementation approach and wanted to confirm alignment before starting.

Current State Analysis

I've examined the frontend architecture and identified:

Tech Stack:

React 19 + TypeScript with Vite build system
react-use-websocket (v4.13.0) already in dependencies
Existing API layer at frontend/src/api/chatbot.ts using REST-only pattern

Current Message Flow:

// frontend/src/api/chatbot.ts
fetchChatbotReply() → POST /sessions/{id}/message → returns complete response
fetchChatbotReplyWithFiles() → POST /sessions/{id}/message/upload → returns complete response

Backend WebSocket Endpoint (PR #68):

ws://localhost:8000/api/chatbot/sessions/{session_id}/stream
Streams JSON tokens: {"token": "word", "is_complete": false}
Final message: {"token": "", "is_complete": true}

🎯 Proposed Implementation

1. Create WebSocket Streaming API Function (`frontend/src/api/chatbot.ts`)

export const streamChatbotReply = (
  sessionId: string,
  userMessage: string,
  onToken: (token: string) => void,
  onComplete: () => void,
  onError: (error: Error) => void
): WebSocket | null => {
  // Implementation using react-use-websocket library
}

2. Progressive Enhancement Strategy

// Pseudo-code for component integration
const sendMessage = async (message: string) => {
  const useWebSocket = checkWebSocketSupport() && config.enableStreaming;
  
  if (useWebSocket) {
    try {
      await streamWithWebSocket(message, handleToken);
    } catch (error) {
      console.warn('WebSocket failed, falling back to HTTP');
      await sendViaREST(message); // Existing fetchChatbotReply()
    }
  } else {
    await sendViaREST(message);
  }
};

3. UI Enhancements

Token-by-token rendering in message component
Streaming indicator (animated ellipsis/spinner)
Connection state display (connecting, streaming, error)

4. Fallback Scenarios (as mentioned in #29)

Browser doesn't support WebSocket API
Connection establishment fails
Mid-stream connection drop
Backend WebSocket endpoint unavailable
User configuration preference to disable streaming

Before proceeding, I'd appreciate clarification on:

Configuration Management: Should WebSocket streaming be:
- Always enabled (with automatic fallback)?
- User-configurable via settings?
- Environment-based (dev vs production)?
File Upload Support: The WebSocket endpoint currently handles text messages. Should I:
- Keep file uploads on REST (/message/upload)?
- Extend WebSocket to support file attachments (future enhancement)?
Testing Requirements:
- Should I include Jest tests for WebSocket logic (using jest-websocket-mock)?
- Are integration tests with the backend expected?
- Accessibility testing for streaming UI states?
Backward Compatibility: Should the PR maintain full REST functionality unchanged, with WebSocket as an opt-in enhancement?

Implementation Timeline

If the approach looks good, I can deliver:

Phase 1: Basic WebSocket integration with fallback (3-4 days)
Phase 2: UI polish + error handling (2 days)
Phase 3: Tests + documentation (2 days)

Looking forward to your feedback! Happy to adjust the approach based on project preferences.

Uh oh!

[UI] Integrate with Websocket #82

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions