AI Response Typing Stream

1"use client";
2 
3import { motion } from "framer-motion";
4import { useEffect, useRef, useState } from "react";
5 
6type AIResponseTypingProps = {
7  text?: string;
8  speed?: number;
9  showCursor?: boolean;
10  onComplete?: () => void;
11  thinkingState?: "idle" | "thinking" | "typing";
12};
13 
14export function AIResponseTyping({
15  text = "Hello! I'm an AI assistant. I can help you with questions, provide information, and assist with various tasks. Feel free to ask me anything!",
16  speed = 30,
17  showCursor = true,
18  onComplete,
19  thinkingState = "typing",
20}: AIResponseTypingProps) {
21  const [displayedText, setDisplayedText] = useState("");
22  const [isThinking, setIsThinking] = useState(false);
23  const [isTyping, setIsTyping] = useState(false);
24  const intervalRef = useRef<NodeJS.Timeout | null>(null);
25 
26  useEffect(() => {
27    if (thinkingState === "thinking") {
28      setIsThinking(true);
29      setIsTyping(false);
30      setDisplayedText("");
31      return;
32    }
33 
34    if (thinkingState === "typing" && text) {
35      setIsThinking(false);
36      setIsTyping(true);
37      setDisplayedText("");
38 
39      let currentIndex = 0;
40      const chars = text.split("");
41 
42      const typeNextChar = () => {
43        if (currentIndex < chars.length) {
44          const nextChar = chars[currentIndex];
45 
46          // Simulate natural typing pauses at punctuation
47          const isPause =
48            nextChar === "." ||
49            nextChar === "," ||
50            nextChar === "!" ||
51            nextChar === "?" ||
52            nextChar === "\n";
53 
54          setDisplayedText((prev) => prev + nextChar);
55          currentIndex++;
56 
57          // Schedule next character with pause if needed
58          if (isPause) {
59            intervalRef.current = setTimeout(() => {
60              typeNextChar();
61            }, speed * 3);
62          } else {
63            intervalRef.current = setTimeout(() => {
64              typeNextChar();
65            }, speed);
66          }
67        } else {
68          if (intervalRef.current) clearTimeout(intervalRef.current);
69          setIsTyping(false);
70          onComplete?.();
71        }
72      };
73 
74      // Start typing
75      typeNextChar();
76 
77      return () => {
78        if (intervalRef.current) clearTimeout(intervalRef.current);
79      };
80    }
81  }, [text, speed, thinkingState, onComplete]);
82 
83  return (
84    <div className="w-full max-w-2xl">
85      <div className="relative rounded-2xl border border-border bg-card p-6 min-h-[100px]">
86        {/* Thinking state shimmer */}
87// … truncated