Handle chunk SSE events for token-by-token streaming

[Nauxie]

No description provided.

[greptile-apps]

Greptile Summary

Added support for token-by-token streaming via a new 'chunk' SSE event handler that incrementally appends content to assistant messages. This complements the existing 'message' event (which replaces full content) by enabling real-time streaming UX.

Key Changes:

• Added 'chunk' case in handleSSEEvent() that appends data.content to existing message content
• Updated comment for 'message' event to clarify it handles complete messages (e.g., from say())
• Both events set status to 'streaming' during processing

Issues Found:

• The 'chunk' event type is not defined in the SSEEventType union in src/types/index.ts, creating a type safety gap

Confidence Score: 3/5

• This PR is functional but has a type safety issue that should be resolved before merging
• The implementation logic is sound and follows the existing pattern for handling SSE events. However, the 'chunk' event type is not included in the SSEEventType union type definition, which breaks type safety. This creates a mismatch between runtime behavior and type system expectations.
• src/types/index.ts needs to be updated to include 'chunk' in the SSEEventType definition

Important Files Changed

Filename	Overview
src/hooks/useChat.ts	Added 'chunk' event handler for token-by-token streaming by appending content incrementally. Type safety issue: 'chunk' not in SSEEventType definition.

Sequence Diagram

sequenceDiagram
    participant User
    participant useChat
    participant Server
    participant UI

    User->>useChat: sendMessage(content)
    useChat->>UI: Add user message
    useChat->>UI: Create placeholder assistant message
    useChat->>Server: sendMessage() via API
    
    Server-->>useChat: SSE: session event
    useChat->>useChat: updateSessionId()
    
    loop Token-by-token streaming
        Server-->>useChat: SSE: chunk event
        useChat->>UI: Append content to message
        Note over useChat,UI: content += chunk.content<br/>status = 'streaming'
    end
    
    Server-->>useChat: SSE: done event
    useChat->>UI: Update status to 'sent'
    UI->>User: Display complete message

Loading

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

logic: 'chunk' is not defined in the SSEEventType union in src/types/index.ts. TypeScript will allow this code but it breaks type safety.

Suggested change

	case 'chunk': {
	// Streaming chunk - append to existing message content
	const data = event.data as { content: string };
	if (data.content) {
	setMessages((prev) =>
	prev.map((m) =>
	m.id === messageId
	? { ...m, content: m.content + data.content, status: 'streaming' as const }
	: m
	)
	);
	}
	break;
	}
	case 'chunk': {
	// Streaming chunk - append to existing message content
	const data = event.data as { content: string };
	if (data.content) {
	setMessages((prev) =>
	prev.map((m) =>
	m.id === messageId
	? { ...m, content: m.content + data.content, status: 'streaming' as const }
	: m
	)
	);
	}
	break;
	}

Add 'chunk' to the type definition:

export type SSEEventType =
  | 'session'
  | 'message'
  | 'chunk' // Token-by-token streaming
  | 'tool_call'
  | 'waiting'
  | 'done'
  | 'completed'
  | 'error';

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/hooks/useChat.ts
Line: 131:144

Comment:
**logic:** `'chunk'` is not defined in the `SSEEventType` union in `src/types/index.ts`. TypeScript will allow this code but it breaks type safety.

```suggestion
        case 'chunk': {
          // Streaming chunk - append to existing message content
          const data = event.data as { content: string };
          if (data.content) {
            setMessages((prev) =>
              prev.map((m) =>
                m.id === messageId
                  ? { ...m, content: m.content + data.content, status: 'streaming' as const }
                  : m
              )
            );
          }
          break;
        }
```

Add `'chunk'` to the type definition:
```typescript
export type SSEEventType =
  | 'session'
  | 'message'
  | 'chunk' // Token-by-token streaming
  | 'tool_call'
  | 'waiting'
  | 'done'
  | 'completed'
  | 'error';
```

How can I resolve this? If you propose a fix, please make it concise.