AIStreamResponse

aistreamresponse-1779388706230.tsx

'use client';
import { useState, useEffect, useRef } from 'react';

export default function AIStreamResponse() {
  const [active, setActive] = useState(false);
  const [displayed, setDisplayed] = useState('');
  const [streaming, setStreaming] = useState(false);
  const [selectedPrompt, setSelectedPrompt] = useState(0);
  const intervalRef = useRef(null);

  const prompts = [
    { q: 'What is the future of AI?', a: 'The future of AI is fundamentally about augmentation, not replacement. We are moving toward systems that understand context, reason across modalities, and collaborate with humans in ways that amplify creativity and accelerate discovery. Expect AI to become infrastructure, as invisible and essential as electricity, powering everything from healthcare diagnostics to climate modeling.' },
    { q: 'Explain quantum computing simply', a: 'Quantum computing harnesses the bizarre behavior of particles at the quantum scale. While a classical bit is either 0 or 1, a quantum bit (qubit) can be both simultaneously through superposition. This, combined with entanglement, allows quantum computers to explore many solutions in parallel, making them exponentially more powerful for specific tasks like drug discovery and cryptography.' },
  ];

  const stream = () => {
    if (streaming) return;
    setDisplayed('');
    setActive(true);
    setStreaming(true);
    const text = prompts[selectedPrompt].a;
    let i = 0;
    intervalRef.current = setInterval(() => {
      i += Math.floor(Math.random() * 4) + 1;
      if (i >= text.length) {
        setDisplayed(text);
        setStreaming(false);
        clearInterval(intervalRef.current);
        return;
      }
      setDisplayed(text.slice(0, i));
    }, 30);
  };

  useEffect(() => () => clearInterval(intervalRef.current), []);

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '520px' }}>
      <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
        {prompts.map((p, i) => (
          <button key={i} onClick={() => { setSelectedPrompt(i); setDisplayed(''); setActive(false); }} style={{
            background: selectedPrompt === i ? 'rgba(99,102,241,0.12)' : 'rgba(255,255,255,0.04)',
            border: `1px solid ${selectedPrompt === i ? 'rgba(99,102,241,0.3)' : 'rgba(255,255,255,0.08)'}`,
            borderRadius: '8px', padding: '6px 12px', cursor: 'pointer',
            color: selectedPrompt === i ? '#6366f1' : 'rgba(245,245,240,0.5)', fontSize: '12px',
          }}>Prompt {i + 1}</button>
        ))}
      </div>
      <div style={{ background: 'rgba(99,102,241,0.06)', border: '1px solid rgba(99,102,241,0.15)', borderRadius: '12px', padding: '14px 18px', marginBottom: '16px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <span style={{ fontSize: '16px' }}>👤</span>
          <p style={{ color: '#F5F5F0', margin: 0, fontSize: '14px' }}>{prompts[selectedPrompt].q}</p>
        </div>
      </div>
      {active && (
        <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: '12px', padding: '14px 18px', marginBottom: '16px' }}>
          <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start' }}>
            <div style={{ width: '24px', height: '24px', borderRadius: '8px', background: 'linear-gradient(135deg, #6366f1, #C9A84C)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', flexShrink: 0 }}>✦</div>
            <p style={{ color: 'rgba(245,245,240,0.85)', margin: 0, fontSize: '14px', lineHeight: 1.7 }}>
              {displayed}
              {streaming && <span style={{ display: 'inline-block', width: '2px', height: '16px', background: '#6366f1', marginLeft: '2px', verticalAlign: 'text-bottom', animation: 'none', opacity: Math.random() > 0.5 ? 1 : 0 }}>|</span>}
            </p>
          </div>
        </div>
      )}
      <button onClick={stream} disabled={streaming} style={{
        background: streaming ? 'rgba(99,102,241,0.1)' : 'linear-gradient(135deg, #6366f1, #818cf8)',
        border: streaming ? '1px solid rgba(99,102,241,0.2)' : 'none',
        borderRadius: '10px', padding: '11px 28px',
        color: streaming ? '#6366f1' : '#fff',
        fontSize: '14px', fontWeight: 700, cursor: streaming ? 'default' : 'pointer',
        display: 'flex', alignItems: 'center', gap: '8px',
      }}>
        {streaming ? (
          <><span style={{ width: '12px', height: '12px', borderRadius: '50%', border: '2px solid #6366f1', borderTopColor: 'transparent', display: 'inline-block', animation: 'spin 0.8s linear infinite' }} />Generating...</>
        ) : '✦ Generate Response'}
      </button>
    </div>
  );
}

Component info

CategoryAI-Specific

Frameworkreact

TierFREE

Copies0

About

Simulated AI streaming text response with cursor

More from AI-Specific

'use client'
import { useState } from 'react'

const TEMPLATES = [
  { id: 'role', label: 'System role', color: '#6366f1', content: 'You are a {role} expert who {expertise}.' },
  { id: 'task', label: 'Task', color: '#C9A84C', content: 'Your task is

PromptBuilder

AI-Specific

import React, { useState, useEffect } from 'react';

interface ChatBubbleProps {
  message: string;
  isAI: boolean;
}

const ChatBubble: React.FC<ChatBubbleProps> = ({ message, isAI }) => {
  const [isTyping, setIsTyping] = useState(false);
  const

ChatBubble

AI-Specific

import React, { useState, useEffect } from 'react';

interface Props {
  text: string;
  speed: number;
}

const StreamingText: React.FC<Props> = ({ text, speed }) => {
  const [displayedText, setDisplayedText] = useState('');
  const [tokens, setTok

StreamingText

AI-Specific

'use client'
import { useState, useRef, useEffect } from 'react'

interface Msg { id: number; role: 'user' | 'assistant'; content: string; streaming?: boolean }

const RESPONSES = [
  "Here's a React component for you:
```tsx
export default function

ChatInterface

AI-Specific