Message

"use client"

import { useEffect, useState } from "react"

import { Message, MessageContent } from "@/components/ui/message"
import { Response } from "@/components/ui/response"

const assistantMessageTokens = [
  "To",
  " create",
  " a",
  " new",
  " agent",
  " with",
  " **",
  "ZGI",
  " Agents",
  "**",
  ",",
  " head",
  " to",
  " this",
  " link",
  ":",
  " ",
  "[",
  "https://zgi.ai/agents",
  "](",
  "https://zgi.ai/agents",
  ")",
  ".",
  "\n\n",
  "1.",
  " Sign",
  " in",
  " to",
  " your",
  " ZGI",
  " account",
  ".",
  "\n",
  "2.",
  " Click",
  " **New",
  " Agent**",
  " to",
  " start",
  ".",
  "\n",
  "3.",
  " Give",
  " your",
  " agent",
  " a",
  " name",
  " and",
  " description",
  ".",
  "\n",
  "4.",
  " Configure",
  " its",
  " behavior",
  ",",
  " knowledge",
  " sources",
  ",",
  " and",
  " voice",
  ".",
  "\n",
  "5.",
  " Save",
  " it",
  " —",
  " and",
  " your",
  " agent",
  " is",
  " ready",
  " to",
  " use",
  ".",
]

function ZgiMark({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 64 64"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      className={className}
    >
      <rect width="64" height="64" rx="18" fill="#0052FF" />
      <path
        d="M20 17h24v6.5l-15.5 21H44V51H19v-6l15.2-21.5H20V17z"
        fill="white"
      />
    </svg>
  )
}

const Example = () => {
  const [content, setContent] = useState("\u200B")

  useEffect(() => {
    let currentContent = ""
    let index = 0

    const interval = setInterval(() => {
      if (index < assistantMessageTokens.length) {
        currentContent += assistantMessageTokens[index]
        setContent(currentContent)
        index++
      } else {
        clearInterval(interval)
      }
    }, 100)

    return () => {
      clearInterval(interval)
    }
  }, [])

  return (
    <>
      <style jsx global>{`
        .message-demo-lists ol,
        .message-demo-lists ul {
          padding-left: 1.25rem !important;
        }
        .message-demo-lists li {
          margin-left: 0 !important;
        }
      `}</style>
      <div className="flex h-full max-h-[400px] w-full max-w-2xl flex-col overflow-hidden">
        <div className="flex flex-col gap-4 overflow-y-auto px-4 py-4">
          <div className="flex-shrink-0">
            <Message from="user">
              <MessageContent>
                <Response>How do I create an agent?</Response>
              </MessageContent>
            </Message>
          </div>
          <div className="message-demo-lists flex-shrink-0">
            <Message from="assistant">
              <MessageContent>
                <Response>{content}</Response>
              </MessageContent>
              <div className="ring-border bg-background flex size-8 items-center justify-center overflow-hidden rounded-full ring-1">
                <ZgiMark className="size-7" />
              </div>
            </Message>
          </div>
        </div>
      </div>
    </>
  )
}

export Example