ChatBubble

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 [typingAnimation, setTypingAnimation] = useState('');

  useEffect(() => {
    let typingInterval: NodeJS.Timeout;
    if (isAI) {
      setIsTyping(true);
      typingInterval = setInterval(() => {
        setTypingAnimation(typingAnimation + '.');
        if (typingAnimation.length >= 3) {
          setIsTyping(false);
          setTypingAnimation('');
        }
      }, 500);
    }
    return () => clearInterval(typingInterval);
  }, [isAI, typingAnimation]);

  return (
    <div style={{
      backgroundColor: '#0A0A0A',
      color: '#FFFFFF',
      padding: '10px',
      borderRadius: '10px',
      position: 'relative'
    }}>
      {isAI && (
        <div style={{
          backgroundColor: '#C9A84C',
          width: '10px',
          height: '10px',
          borderRadius: '50%',
          position: 'absolute',
          top: '10px',
          right: '10px'
        }} />
      )}
      {isTyping ? (
        <span>{typingAnimation}</span>
      ) : (
        <span>{message}</span>
      )}
    </div>
  );
};

export default ChatBubble;

Component info

About

A customizable React component for creating chat bubbles with a dark background and a gold AI indicator. The component features a typing animation, providing a seamless user experience. It is built with TypeScript and does not include any console logs. The component is designed to be used in a variety of applications, including chatbots and virtual assistants. With its sleek and modern design, the ChatBubble component is perfect for businesses and individuals looking to create a professional and engaging user interface. The component's dark background and gold AI indicator provide a sharp and luxurious look, while the typing animation adds a touch of personality and whimsy. Whether you're building a chatbot or a virtual assistant, the ChatBubble component is the perfect choice for creating a high-quality and engaging user experience.