explain flow in marathi

explain flow in marathi

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

// Configuration variables
const EXTRA_HEIGHT = 2; // pixels
const MESSAGE_TYPING_INTERVAL = 1500; // milliseconds
const WORD_APPEAR_DELAY = 500; // milliseconds
const ANIMATION_DURATION = 300; // milliseconds
const SETTLE_DELAY = 100; // milliseconds

const ChatPage = () => {
  const [chatHistory, setChatHistory] = useState([]);
  const [currentMessageLines, setCurrentMessageLines] = useState([]);
  const chatContainerRef = useRef(null);

  const currentMessageContent = [
    "01. This is the first sentence of the message.",
    "02. Lorem ipsum dolor sit amet, consectetur adipiscing. ",
    "03. The third sentence is adding even more content.",
    "04. Fourth sentence: the message keeps growing.",
    "05. Fifth sentence: we're halfway through.",
    "06. Sixth sentence: the content continues to expand.",
    "07. Seventh sentence: almost there!",
    "08. Eighth sentence: getting close to the end.",
    "09. Ninth sentence: just one more to go.",
    "10. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
  ];

  useEffect(() => {
    setChatHistory(
      Array(20)
        .fill(null)
        .map((_, index) => ({
          text: `Previous message ${index + 1}`,
          isUser: index % 2 === 0,
        }))
    );

    setCurrentMessageLines([
      { text: currentMessageContent[0], visible: true, expanded: false },
    ]);

    let lineIndex = 1;
    const intervalId = setInterval(() => {
      if (lineIndex < currentMessageContent.length) {
        setCurrentMessageLines((prev) => [
          ...prev,
          {
            text: currentMessageContent[lineIndex],
            visible: false,
            expanded: false,
          },
        ]);
        setTimeout(() => {
          setCurrentMessageLines((prev) =>
            prev.map((item, i) =>
              i === prev.length - 1 ? { ...item, visible: true } : item
            )
          );
          lineIndex++;
        }, WORD_APPEAR_DELAY);
      } else {
        clearInterval(intervalId);
      }
    }, MESSAGE_TYPING_INTERVAL);

    return () => clearInterval(intervalId);
  }, []);

  useEffect(() => {
    if (chatContainerRef.current) {
      chatContainerRef.current.scrollTop =
        chatContainerRef.current.scrollHeight;
    }
  }, [currentMessageLines]);

  return (
    <div
      ref={chatContainerRef}
      style={{
        height: "100vh",
        overflowY: "auto",
        display: "flex",
        flexDirection: "column-reverse",
        padding: "20px",
        backgroundColor: "#F0F0F0",
        scrollBehavior: "smooth",
      }}
    >
      <CurrentMessage
        messageLines={currentMessageLines}
        setMessageLines={setCurrentMessageLines}
      />
      {chatHistory.map((message, index) => (
        <ChatMessage key={index} message={message} />
      ))}
      <style jsx>{`
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(10px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
      `}</style>
    </div>
  );
};

const CurrentMessage = ({ messageLines, setMessageLines }) => {
  const messageRef = useRef(null);
  const lineRefs = useRef([]);

  const timestamp = "12:33 PM";

  useEffect(() => {
    lineRefs.current = lineRefs.current.slice(0, messageLines.length);
  }, [messageLines]);

  useEffect(() => {
    messageLines.forEach((line, index) => {
      if (line.visible && !line.expanded) {
        const lineElement = lineRefs.current[index];
        if (lineElement) {
          const actualHeight = lineElement.scrollHeight;
          lineElement.style.height = "0px";
          lineElement.style.opacity = "0";

          requestAnimationFrame(() => {
            lineElement.style.height = `${actualHeight + EXTRA_HEIGHT}px`;
            lineElement.style.opacity = "1";

            setTimeout(() => {
              lineElement.style.height = `${actualHeight}px`;

              setTimeout(() => {
                lineElement.style.height = "auto";
                setMessageLines((prev) =>
                  prev.map((item, i) =>
                    i === index ? { ...item, expanded: true } : item
                  )
                );
              }, ANIMATION_DURATION);
            }, ANIMATION_DURATION + SETTLE_DELAY);
          });
        }
      }
    });
  }, [messageLines, setMessageLines]);

  return (
    <div
      ref={messageRef}
      style={{
        alignSelf: "flex-start",
        backgroundColor: "#2196F3",
        color: "white",
        padding: "10px",
        borderRadius: "10px",
        marginBottom: "50px",
        maxWidth: "70%",
        transition: `all ${ANIMATION_DURATION}ms ease-out, width ${ANIMATION_DURATION}ms ease-out`,
        display: "flex",
        flexDirection: "column",
      }}
    >
      <div style={{ flexGrow: 1 }}>
        {messageLines.map((line, index) => (
          <MessageLine
            key={index}
            line={line}
            index={index}
            lineRefs={lineRefs}
          />
        ))}
      </div>
      <div style={{ padding: "5px", textAlign: "right" }}>{timestamp}</div>
    </div>
  );
};

const MessageLine = ({ line, index, lineRefs }) => {
  return (
    <div
      ref={(el) => (lineRefs.current[index] = el)}
      style={{
        height: line.visible ? (line.expanded ? "auto" : "0px") : "0px",
        opacity: line.visible ? 1 : 0,
        overflow: "hidden",
        transition: `height ${ANIMATION_DURATION}ms ease-out, opacity ${ANIMATION_DURATION}ms ease-out`,
        marginBottom: line.visible ? "5px" : "0",
      }}
    >
      {line.text}
    </div>
  );
};

const ChatMessage = ({ message }) => (
  <div
    style={{
      alignSelf: message.isUser ? "flex-end" : "flex-start",
      backgroundColor: message.isUser ? "#4CAF50" : "#2196F3",
      color: "white",
      padding: "10px",
      borderRadius: "10px",
      marginBottom: "10px",
      maxWidth: "70%",
      animation: "fadeIn 0.5s ease-out",
    }}
  >
    {message.text}
  </div>
);

export default ChatPage;