스트리밍 응답: 실시간 AI 출력

[Non-streaming]
- 사용자가 질문
- 5~30초 대기 (응답 전체 생성)
- 한꺼번에 표시

[Streaming]
- 사용자가 질문
- 0.5초 후 첫 토큰
- 토큰 단위 점진 표시
- 전체 5~30초 동안 계속


→ 체감 속도 10배
→ "이미 답변 중" — 사용자 인내심 ↑

// 서버
import { streamText } from 'ai';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({ model, messages });
  return result.toDataStreamResponse();
}


// 클라이언트 — useChat이 자동 처리
import { useChat } from 'ai/react';

const { messages, isLoading } = useChat();
// messages는 자동으로 토큰 단위 업데이트

// 직접 스트림 처리
'use client';
import { useState } from 'react';

export function CustomChat() {
  const [response, setResponse] = useState('');
  const [isStreaming, setIsStreaming] = useState(false);

  const send = async (message: string) => {
    setIsStreaming(true);
    setResponse('');

    const res = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ message }),
    });

    if (!res.body) throw new Error('No body');

    const reader = res.body.getReader();
    const decoder = new TextDecoder();

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      const text = decoder.decode(value);
      setResponse(prev => prev + text);
    }

    setIsStreaming(false);
  };

  return (
    <>
      <div>{response}</div>
      {isStreaming && <Cursor />}
    </>
  );
}

function TypingIndicator() {
  return (
    <div className="flex space-x-1">
      <span className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
      <span className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
      <span className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
    </div>
  );
}


// 표시
{isLoading && response === '' && <TypingIndicator />}

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

function StreamedMessage({ content }: { content: string }) {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm]}
      components={{
        code: ({ children, ...props }) => (
          <code className="bg-muted px-1 rounded" {...props}>{children}</code>
        ),
      }}
    >
      {content}
    </ReactMarkdown>
  );
}


// 부분 코드 블록 처리 (스트리밍 중)
// "```typescript\nconst x"  ← 미완성 — 라이브러리가 자동 처리

'use client';
import { useChat } from 'ai/react';

const { messages, stop, isLoading } = useChat();

// 사용자가 중단 가능
{isLoading && <button onClick={stop}>중단</button>}


// 서버에서도 처리 (AbortSignal)
export async function POST(req: Request) {
  const result = streamText({
    model,
    messages,
    abortSignal: req.signal,  // 클라이언트 중단 → 서버도 중단
  });
  return result.toDataStreamResponse();
}

// Tool 호출 중에도 사용자에게 표시
const result = streamText({
  model,
  messages,
  tools: { searchDb, sendEmail },
  onStepFinish({ stepType, toolCalls }) {
    // 각 단계 종료 시 호출
    console.log(`Step: ${stepType}`, toolCalls);
  },
});


// 클라이언트 — toolInvocations 표시
{message.toolInvocations?.map(invocation => (
  <div className="bg-muted p-2 rounded">
    🔧 {invocation.toolName}({JSON.stringify(invocation.args)})
  </div>
))}