Components / AI Chat Interfaces

AI Streaming Text

A typewriter-style streaming text component that simulates token-by-token AI response generation with cursor animation.

tsx
"use client";

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

interface StreamingTextProps {
  text: string;
  speed?: number;
  onComplete?: () => void;
}

export default function AIStreamingText({ text, speed = 30, onComplete }: StreamingTextProps) {
  const [displayed, setDisplayed] = useState("");
  const [isComplete, setIsComplete] = useState(false);

  useEffect(() => {
    setDisplayed("");
    setIsComplete(false);
    let i = 0;
    const interval = setInterval(() => {
      if (i < text.length) {
        setDisplayed(text.slice(0, i + 1));
        i++;
      } else {
        clearInterval(interval);
        setIsComplete(true);
        onComplete?.();
      }
    }, speed);
    return () => clearInterval(interval);
  }, [text, speed]);

  return (
    <div className="text-sm leading-relaxed text-zinc-800 dark:text-zinc-200">
      {displayed}
      {!isComplete && (
        <span className="inline-block w-2 h-4 ml-0.5 bg-zinc-800 dark:bg-zinc-200 animate-pulse" />
      )}
    </div>
  );
}

Installation

Dependencies

  • react 
                            npm install react

Related Components

  • AI Chat Bubble — A conversational chat bubble component with typing indicator, avatar support, and message timestamps for AI chat interfaces.
  • AI Chat Input Bar — A modern chat input bar with send button, attachment support, and auto-resize textarea for AI conversation interfaces.
  • AI Chat Window — A full-featured AI chat window with message history, streaming response animation, and conversation management.
  • AI Chat Sidebar — A conversation history sidebar listing previous AI chat sessions with search, date grouping, and active state indicators.
  • AI Model Selector — A dropdown model selector for choosing between AI models (GPT-4, Claude, Gemini) with model info badges and capability indicators.
  • AI Response Actions — An action bar for AI responses with copy, regenerate, thumbs up/down, and share buttons with tooltip labels.