Implement useStreaming hook for chat responses #11772

function useStreaming(sessionId: string | null) {
  const [isStreaming, setIsStreaming] = useState(false)
  const [streamingText, setStreamingText] = useState('')
  const [error, setError] = useState<Error | null>(null)
  
  const sendMessage = useCallback(async (content: string) => {
    if (!sessionId || isStreaming) return
    
    setIsStreaming(true)
    setStreamingText('')
    setError(null)
    
    try {
      const response = await fetch(`http://localhost:${port}/session/${sessionId}/message`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content })
      })
      
      const reader = response.body?.getReader()
      const decoder = new TextDecoder()
      
      while (true) {
        const { done, value } = await reader.read()
        if (done) break
        
        const chunk = decoder.decode(value)
        // Parse SSE chunks, extract text deltas
        for (const line of chunk.split('\n')) {
          if (line.startsWith('data: ')) {
            const data = JSON.parse(line.slice(6))
            if (data.type === 'text') {
              setStreamingText(prev => prev + data.content)
            }
          }
        }
      }
    } catch (err) {
      setError(err as Error)
    } finally {
      setIsStreaming(false)
    }
  }, [sessionId, isStreaming])
  
  const cancel = useCallback(() => {
    // Send cancel signal
  }, [])
  
  return { isStreaming, streamingText, error, sendMessage, cancel }
}

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  const { isStreaming, streamingText, sendMessage, cancel } = useStreaming(state.session.id)
  
  // SDK events update tools/tasks
  useSDKEvents(state.session.id, dispatch)
  
  // When streaming ends, complete the message
  useEffect(() => {
    if (!isStreaming && streamingText) {
      dispatch({ type: 'MESSAGE_COMPLETE', text: streamingText })
    }
  }, [isStreaming, streamingText])
  
  return (
    <Box flexDirection="column">
      <Static items={state.messages}>...</Static>
      <LiveSection 
        text={streamingText} 
        tools={state.streaming.tools}
        tasks={state.streaming.tasks}
        isStreaming={isStreaming}
      />
      <InputLine onSubmit={sendMessage} onCancel={cancel} disabled={isStreaming} />
    </Box>
  )
}