Response

"use client";import { Response } from "@/components/ai-elements/elements/response";import { useEffect, useState } from "react";const tokens = [  "### Hello",  " World",  "\n\n",  "This",  " is",  " a",  " **mark",  "down",  "**",  " response",  " from",  " an",  " AI",  " model",  ".",  "\n\n",  "---",  "\n\n",  "## Tables",  "\n\n",  "| Column 1",  " | Column 2",  " | Column 3",  " |",  "\n",  "|----------|----------|----------|",  "\n",  "| Row 1, Col 1",  " | Row 1, Col 2",  " | Row 1, Col 3",  " |",  "\n",  "| Row 2, Col 1",  " | Row 2, Col 2",  " | Row 2, Col 3",  " |",  "\n",  "| Row 3, Col 1",  " | Row 3, Col 2",  " | Row 3, Col 3",  " |",  "\n\n",  "## Blockquotes",  "\n\n",  "> This",  " is",  " a",  " blockquote.",  " It",  " can",  " contain",  " multiple",  " lines",  " and",  " **formatted**",  " text.",  "\n",  ">",  "\n",  "> It",  " can",  " even",  " have",  " multiple",  " paragraphs.",  "\n\n",  "## Inline",  " Code",  "\n\n",  "Here",  " is",  " some",  " text",  " with",  " `inline",  " code`",  " in",  " the",  " middle",  " of",  " a",  " sentence.",  " You",  " can",  " also",  " use",  " `const",  " x",  " =",  " 42`",  " for",  " variable",  " declarations.",  "\n\n",  "## Code",  " Blocks",  "\n\n",  "```",  "javascript",  "\n",  "const",  " greeting",  " = ",  "'Hello, world!'",  ";",  "\n",  "console",  ".",  "log",  "(",  "greeting",  ")",  ";",  "\n",  "```",  "\n\n",  "## Math",  "\n\n",  "It",  " also",  " supports",  " math",  " equations",  ", ",  "like",  " this",  " inline",  " one",  ": ",  "$",  "E",  " = ",  "mc",  "^2",  "$",  ".",  "\n\n",  "And",  " here",  " is",  " a",  " display",  " equation",  " for",  " the",  " quadratic",  " formula",  ":",  "\n\n",  "$$",  "\n",  "x",  " = ",  "\\frac",  "{",  "-b",  " \\pm",  " \\sqrt",  "{",  "b^2",  " -",  " 4ac",  "}",  "}",  "{",  "2a",  "}",  "\n",  "$$",  "\n\n",  "## Links",  " and",  " Lists",  "\n\n",  "Here's",  " a",  " [",  "link",  "](",  "https://example.com",  ")",  " and",  " some",  " more",  " text",  " with",  " an",  " unordered",  " list",  ":",  "\n\n",  "-",  " Item",  " one",  "\n",  "-",  " Item",  " two",  "\n",  "-",  " Item",  " three",  "\n\n",  "## Ordered",  " Lists",  "\n\n",  "1.",  " First",  " item",  "\n",  "2.",  " Second",  " item",  "\n",  "3.",  " Third",  " item",];const Example = () => {  const [content, setContent] = useState("");  useEffect(() => {    let currentContent = "";    let index = 0;    const interval = setInterval(() => {      if (index < tokens.length) {        currentContent += tokens[index];        setContent(currentContent);        index++;      } else {        clearInterval(interval);      }    }, 100);    return () => clearInterval(interval);  }, []);  return <Response className="h-[500px]">{content}</Response>;};export default Example;