response-demo

1"use client"
2 
3import { useEffect, useState } from "react"
4 
5import { Response } from "@/components/ui/response"
6 
7const tokens = [
8  "### Welcome",
9  "\n\n",
10  "This",
11  " is",
12  " a",
13  " **rich",
14  " markdown",
15  "**",
16  " showcase",
17  " with",
18  " multiple",
19  " features.",
20  "\n\n",
21  "---",
22  "\n\n",
23  "## Data Table",
24  "\n\n",
25  "| Name",
26  " | Role",
27  " | Status",
28  " |",
29  "\n",
30  "|------|------|--------|",
31  "\n",
32  "| Alice",
33  " | Engineer",
34  " | Active",
35  " |",
36  "\n",
37  "| Bob",
38  " | Designer",
39  " | Active",
40  " |",
41  "\n",
42  "| Carol",
43  " | PM",
44  " | Active",
45  " |",
46  "\n\n",
47  "## Inspiration",
48  "\n\n",
49  "> *Simplicity",
50  " is",
51  " the",
52  " ultimate",
53  " sophistication.*",
54  "\n",
55  "> —",
56  " Leonardo",
57  " da",
58  " Vinci",
59  "\n\n",
60  "## Inline",
61  " and",
62  " Block",
63  " Code",
64  "\n\n",
65  "Use",
66  " `let",
67  " total",
68  " =",
69  " items.length`",
70  " to",
71  " count",
72  " elements.",
73  "\n\n",
74  "```",
75  "python",
76  "\n",
77  "def",
78  " greet(name):",
79  "\n",
80  "    return",
81  ' f"Hello, {name}!"',
82  "\n",
83  'print(greet("World"))',
84  "\n",
85  "```",
86  "\n\n",
87  "## Math",
88  "\n\n",
89  "Inline",
90  " math:",
91  " $a^2",
92  " +",
93  " b^2",
94  " =",
95  " c^2$",
96  ".",
97  "\n\n",
98  "Displayed",
99  " equation:",
100  "\n\n",
101  "$$",
102  "\n",
103  "\\int_0^1",
104  " x^2",
105  " dx",
106  " =",
107  " \\frac{1}{3}",
108  "\n",
109  "$$",
110  "\n\n",
111]
112 
113const Example = () => {
114  const [content, setContent] = useState("")
115 
116  useEffect(() => {
117    let currentContent = ""
118    let index = 0
119 
120    const interval = setInterval(() => {
121      if (index < tokens.length) {
122        currentContent += tokens[index]
123        setContent(currentContent)
124        index++
125      } else {
126        clearInterval(interval)
127      }
128    }, 100)
129 
130    return () => clearInterval(interval)
131  }, [])
132 
133  return (
134    <div className="h-full min-h-0 w-full overflow-hidden">
135      <Response className="h-full overflow-auto p-10">{content}</Response>
136    </div>
137  )
138}
139 
140export default Example