botui/botui-docs

Docs about BotUI

A JavaScript framework for creating conversational UIs.

Main Site - Read Docs - Examples - 🪄 Quickstart

Showcase 🎇✨

We are listing all the cool projects that people are building with BotUI, here. See others' and add yours!

🚨 Note

This version is using a completely different approach for building UIs. Do not use it as a drop-in replacement for the previous version. If you want to use the previous (vue-only) approach, install the 0.3.9 version: npm i [email protected].

Quick look

Installation

npm i botui @botui/react

Example usage in React

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(() => {
    myBot
      .wait({ waitTime: 1000 })
      .then(() => myBot.message.add({ text: 'hello, what is your name?' }))
      .then(() => myBot.action.set(
          {
            options: [
              { label: 'John', value: 'john' },
              { label: 'Jane', value: 'jane' },
            ],
          },
          { actionType: 'select' }
      ))
      .then((data) => myBot.message.add({ text: `nice to meet you ${data.selected.label}` }))
  }, [])

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

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

License

MIT License - Copyrights (c) 2017-23 - Moin Uddin

botui-docs's Issues

botui.action.select

The example for select trows and error

botui.action.select({
    action: {
        placeholder : "Select Language",
        value: 'TR,EN', // Selected value or Selected Array object. Example: [{value: "TR", text : "Türkçe" },{value: "EN", text : "English" }]
        multipleselect : true, // Default: false
        options : [
            {value: "EN", text : "English" },
            {value: "ES", text : "Español" },
            {value: "TR", text : "Türkçe" },
            {value: "DE", text : "Deutsch" },
            {value: "FR", text : "Français" },
            {value: "IT", text : "Italiano" },
        ],
        button: {
            icon: 'check',
            label: 'OK'
        }
    }
})

TypeError: botui.action.select is not a function

how to make botui.message.human . Responsive to web

Hello,

I want to make botui.message.human and
boui.message.action(the bot side button) as responsive to web.
(for example. when the screen is wide,
than botui.message can do expand, depends on the screen size.

Please tell me if you have any idea to make up this problem.

Thank you.

• Sujeong-

[Bug] Message with image disappears!

when you add a message with image on the bot side, and then you generate an input to ask a question, the image disappears!

Can I add images from bot

Can I add/ take input as images or other file format from bot?
I want this as a product bot that user can add product images

Uncaught TypeError: botui.action.select is not a function

I use the sample code in docs.
and got this error
Uncaught TypeError: botui.action.select is not a function