Mermaid Diagram Demo

import { ChatSection, ChatInput, ChatMessage, ChatMessages, useChatUI } from '@llamaindex/chat-ui'
import {  useChat } from 'ai/react'

// This demo requires mermaid to be installed in your project:
// pnpm add mermaid

function MermaidChat() {
  const handler = useChat()
  return (
    <ChatSection handler={handler} className="h-full">
      <MermaidChatMessages />
      <ChatInput />
    </ChatSection>
  )
}
function MermaidChatMessages() {
  const { messages, isLoading, append } = useChatUI()
  return (
    <ChatMessages>
      <ChatMessages.List>
        {messages.map((message, index) => (
          <ChatMessage
            key={index}
            message={message}
            isLast={index === messages.length - 1}
            className="items-start"
          >
            <ChatMessage.Avatar />
            <ChatMessage.Content isLoading={isLoading} append={append} />
            <ChatMessage.Actions />
          </ChatMessage>
        ))}
      </ChatMessages.List>
    </ChatMessages>
  )
}