⚛️ React

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

// Streaming AI Response Component
import { useState, useEffect } from 'react';
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

interface StreamingResponseProps {
  endpoint: string;
  prompt: string;
  onComplete?: (response: string) => void;
}

export function StreamingResponse({ 
  endpoint, 
  prompt, 
  onComplete 
}: StreamingResponseProps) {
  const [response, setResponse] = useState('');
  const [isStreaming, setIsStreaming] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchStream = async () => {
      setIsStreaming(true);
      setResponse('');
      
      try {
        const res = await fetch(endpoint, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ prompt }),
        });

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

        while (reader) {
          const { done, value } = await reader.read();
          if (done) break;
          
          const chunk = decoder.decode(value);
          setResponse(prev => prev + chunk);
        }
        
        onComplete?.(response);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Stream failed');
      } finally {
        setIsStreaming(false);
      }
    };

    fetchStream();
  }, [endpoint, prompt]);

  return (
    <div className="ai-response">
      <ReactMarkdown
        components={{
          code({ node, inline, className, children }) {
            const match = /language-(\w+)/.exec(className || '');
            return !inline && match ? (
              <SyntaxHighlighter language={match[1]}>
                {String(children).replace(/\n$/, '')}
              </SyntaxHighlighter>
            ) : (
              <code className={className}>{children}</code>
            );
          },
        }}
      >
        {response}
      </ReactMarkdown>
      {isStreaming && <span className="cursor-blink">▊</span>}
      {error && <div className="error">{error}</div>}
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

src/
├── components/
│   ├── ui/           # Reusable UI components
│   ├── features/     # Feature-specific components
│   └── layouts/      # Page layouts
├── hooks/            # Custom hooks
├── services/         # API clients
├── stores/           # State management
├── utils/            # Helper functions
├── types/            # TypeScript types
└── pages/            # Next.js pages (or routes)