function App() {
  return (
    <div>
      <Chat class="p-4" messages={messages}></Chat>
      <Button
        type="primary"
        onClick={() => {
          setMessages([
            ...messages,
            {
              id: `${Date.now()}`,
              content: '测试消息',
              role: 'user',
              loading: false,
            },
          ])
        }}
      >
        test add
      </Button>
    </div>
  )
}

const Chat: React.FC<ChatProps> = ({
  difyAPIUrl,
  difyAPIKey,
  messages,
}: ChatProps) => {
  const memoMessages = React.useMemo(() => messages, [messages])

  return (
    <>
      <XProvider theme={theme}>
        <DifyContext value={{ difyAPIUrl, difyAPIKey }}>
          <ChatList messages={memoMessages}></ChatList>
        </DifyContext>
      </XProvider>
    </>
  )
}

function ChatList({ messages }: ChatListProps) {
  const rolesAsObject: GetProp<typeof Bubble.List, 'roles'> = {
    assistant: {
      placement: 'start',
      avatar: { icon: <UserOutlined />, style: { background: '#fde3cf' } },
      typing: { step: 5, interval: 20 },
      styles: {
        content: {
          backgroundColor: 'white',
        },
      },
      variant: 'shadow',
      shape: 'corner',
      messageRender: renderMarkdown,
      classNames: {
        header: 'w-full',
      },
    },
    user: {
      placement: 'end',
      // avatar: { icon: <UserOutlined />, style: { background: '#87d068' } },
      shape: 'corner',
    },
  }

  const renderMessages = useMemo(() => {
    return messages.map((item) => ({
      key: item.id,
      role: item.role,
      content: item.content,
      header: renderWorkflow(item.workflowProcess),
      loading: item.loading ?? false,
    }))
  }, [messages])

  return (
    <>
      <Bubble.List
        items={renderMessages}
        roles={rolesAsObject}
        className="h-full"
      ></Bubble.List>
    </>
  )
}