Building an AI Chatbot UI with SSE Streaming and Auto-Scroll

Chatbot UI Implementation

I implemented an AI chatbot interface in both plateerag_home_dev and web-front. Here's a summary of the common patterns and challenges.

Chatbot Architecture

sequenceDiagram
    participant U as 사용자
    participant C as ChatUI
    participant A as API
    participant L as LLM

    U->>C: 메시지 입력
    C->>A: POST /chat (SSE)
    A->>L: 프롬프트 전달
    L-->>A: 토큰 스트리밍
    A-->>C: SSE data: {token}
    C-->>U: 실시간 텍스트 표시

SSE Client

async function streamChat(message: string) {
  const response = await fetch('/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message })
  });

  const reader = response.body!.getReader();
  const decoder = new TextDecoder();
  let buffer = '';

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    buffer += decoder.decode(value, { stream: true });
    const lines = buffer.split('\n');
    buffer = lines.pop() || '';

    for (const line of lines) {
      if (line.startsWith('data: ')) {
        const data = JSON.parse(line.slice(6));
        appendToken(data.content);
      }
    }
  }
}

Auto-scroll

Automatically scroll to the bottom as new messages arrive:

const messagesEndRef = useRef<HTMLDivElement>(null);

useEffect(() => {
  messagesEndRef.current?.scrollIntoView({
    behavior: 'smooth'
  });
}, [messages]);

Markdown Rendering

Render markdown in real time as responses stream in:

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

function ChatMessage({ content }: { content: string }) {
  return (
    <ReactMarkdown remarkPlugins={[remarkGfm]}>
      {content}
    </ReactMarkdown>
  );
}

Common Challenges

1. Markdown during streaming: Incomplete markdown produces broken rendering mid-stream
2. Auto-scroll vs. manual scroll: Disable auto-scroll when the user has scrolled up
3. Error handling: Handling dropped connections and timeouts
4. Message history: Managing the context window