message-demo

1"use client"
2 
3import { useEffect, useState } from "react"
4 
5import { Message, MessageContent } from "@/components/ui/message"
6import { Orb } from "@/components/ui/orb"
7import { Response } from "@/components/ui/response"
8 
9const assistantMessageTokens = [
10  "To",
11  " create",
12  " a",
13  " new",
14  " agent",
15  " with",
16  " **",
17  "ElevenLabs",
18  " Agents",
19  "**",
20  ",",
21  " head",
22  " to",
23  " this",
24  " link",
25  ":",
26  " ",
27  "[",
28  "https://elevenlabs.io/app/agents",
29  "](",
30  "https://elevenlabs.io/app/agents",
31  ")",
32  ".",
33  "\n\n",
34  "1.",
35  " Sign",
36  " in",
37  " to",
38  " your",
39  " ElevenLabs",
40  " account",
41  ".",
42  "\n",
43  "2.",
44  " Click",
45  " **New",
46  " Agent**",
47  " to",
48  " start",
49  ".",
50  "\n",
51  "3.",
52  " Give",
53  " your",
54  " agent",
55  " a",
56  " name",
57  " and",
58  " description",
59  ".",
60  "\n",
61  "4.",
62  " Configure",
63  " its",
64  " behavior",
65  ",",
66  " knowledge",
67  " sources",
68  ",",
69  " and",
70  " voice",
71  ".",
72  "\n",
73  "5.",
74  " Save",
75  " it",
76  " —",
77  " and",
78  " your",
79  " agent",
80  " is",
81  " ready",
82  " to",
83  " use",
84  ".",
85]
86 
87const Example = () => {
88  const [content, setContent] = useState("\u200B")
89  const [isStreaming, setIsStreaming] = useState(false)
90 
91  useEffect(() => {
92    let currentContent = ""
93    let index = 0
94 
95    const startTimeout = setTimeout(() => {
96      setIsStreaming(true)
97    }, 500)
98 
99    const interval = setInterval(() => {
100      if (index < assistantMessageTokens.length) {
101        currentContent += assistantMessageTokens[index]
102        setContent(currentContent)
103        index++
104      } else {
105        clearInterval(interval)
106        setIsStreaming(false)
107      }
108    }, 100)
109 
110    return () => {
111      clearInterval(interval)
112      clearTimeout(startTimeout)
113    }
114  }, [])
115 
116  return (
117    <>
118      <style jsx global>{`
119        .message-demo-lists ol,
120        .message-demo-lists ul {
121          padding-left: 1.25rem !important;
122        }
123        .message-demo-lists li {
124          margin-left: 0 !important;
125        }
126      `}</style>
127      <div className="flex h-full max-h-[400px] w-full max-w-2xl flex-col overflow-hidden">
128        <div className="flex flex-col gap-4 overflow-y-auto px-4 py-4">
129          <div className="flex-shrink-0">
130            <Message from="user">
131              <MessageContent>
132                <Response>How do I create an agent?</Response>
133              </MessageContent>
134            </Message>
135          </div>
136          <div className="message-demo-lists flex-shrink-0">
137// … truncated