import { useEffect } from 'react'
import { createRoot } from 'react-dom/client'

import { createBot } from 'botui'
import { BotUI, BotUIMessageList, BotUIAction } from '@botui/react'

const myBot = createBot()

<div id="botui-app"></div>

const App = () => {

  useEffect(() => {
    (async () => {
      await myBot.wait({ waitTime: 1000 });
      await myBot.message.add({ text: 'hello, what is your name?' });
      const data = await myBot.action.set(
        {
          options: [
            { label: 'John', value: 'john' },
            { label: 'Jane', value: 'jane' },
          ],
        },
        { actionType: 'select' }
      );
      await myBot.message.add({ text: `nice to meet you ${data.selected.label}` });
    })();
  }, [myBot])

  return <div>
    <BotUI bot={myBot}>
      <BotUIMessageList />
      <BotUIAction />
    </BotUI>
  </div>
}

const containerElement = document.getElementById('botui-app')
const root = createRoot(containerElement)
root.render(<App />)