Streaming Support [Chat Embed] [Client Component]

[Nauxie]

Note

Enable token-by-token streaming for assistant replies

• Adds SSE chunk event handling in useChat to append content incrementally and keep status streaming
• Treats SSE message as legacy full response; retains support but prioritizes chunk
• Updates SSEEventType in types to include chunk and annotates message as legacy
• Minor import cleanup in ChatWidget.tsx (uses DEFAULT_ENGINE_URL from API client)

^{Written by Cursor Bugbot for commit e54bf51. This will update automatically on new commits. Configure here.}

[greptile-apps]

Greptile Summary

This PR adds support for real-time token streaming in the chat widget by introducing a new 'chunk' SSE event type that allows the server to send message content incrementally. The implementation correctly handles both legacy complete 'message' events and new streaming 'chunk' events, appending chunks to build the full response. The PR also refactors the codebase to centralize the DEFAULT_ENGINE_URL constant, eliminating duplication between the API client and ChatWidget component, and updates the server URL to point to the new deployments service.

Key changes:

• Added 'chunk' event type to SSEEventType for token-by-token streaming
• Implemented chunk event handler in useChat hook that appends content incrementally
• Centralized DEFAULT_ENGINE_URL constant in src/api/client.ts and removed duplication
• Updated engine URL from WhatsApp-based server to new deployments service
• Maintained backward compatibility with legacy 'message' event type

Confidence Score: 4/5

• This PR is safe to merge. The streaming implementation is well-structured and maintains backward compatibility with existing event types.
• The PR introduces focused, well-implemented changes for streaming support. The chunk handler correctly appends content to build messages incrementally, state management is consistent, and the refactoring properly centralizes the URL constant. The score is 4/5 rather than 5 due to a minor inconsistency in comments regarding the localhost port reference in src/api/client.ts, though this doesn't affect functionality.
• src/api/client.ts requires attention: The TODO comment references updating the localhost port as 8003, but the commented-out line references 8000. This is a minor documentation inconsistency.

Important Files Changed

Filename	Overview
src/types/index.ts	Added 'chunk' event type to SSEEventType union for streaming token-by-token responses. Change is backward compatible and properly documented.
src/hooks/useChat.ts	Added handler for 'chunk' events that appends streaming content incrementally to existing messages. Implementation correctly uses state updates and maintains consistent message status. Unused type field in data destructuring is minor.
src/api/client.ts	Changed DEFAULT_ENGINE_URL to new deployment server and exported it for reuse. Updated URL from whatsapp-based-server to deployments-z71a; includes TODO comment about updating when dedicated service is live. Comment references wrong localhost port (8003 vs 8000 in code).
src/components/ChatWidget/ChatWidget.tsx	Refactored to import DEFAULT_ENGINE_URL from api/client.ts instead of duplicating constant. Eliminates duplication and improves maintainability. Change is clean and focused.

Sequence Diagram

sequenceDiagram
    participant User
    participant ChatWidget
    participant useChat Hook
    participant API Client
    participant Server
    participant State Manager

    User->>ChatWidget: Send message
    ChatWidget->>useChat Hook: sendMessage(content)
    
    useChat Hook->>State Manager: Create user message
    useChat Hook->>State Manager: Create empty assistant message
    
    useChat Hook->>API Client: sendMessage({embedId, message, sessionId})
    API Client->>Server: POST /chat/message (SSE stream)
    
    Server-->>API Client: Stream response start
    
    API Client->>useChat Hook: ReadableStream<Uint8Array>
    
    loop Process SSE Events
        Server-->>API Client: data: {type: 'chunk', content: 'token'}
        API Client->>useChat Hook: parseSSEEvent
        useChat Hook->>State Manager: Append chunk to message.content
        State Manager-->>ChatWidget: Update messages (streaming)
        ChatWidget-->>User: Display partial response
    end
    
    Server-->>API Client: data: {type: 'done'}
    useChat Hook->>State Manager: Mark message status: 'sent'
    State Manager-->>ChatWidget: Update message status
    ChatWidget-->>User: Show complete response

Loading