botui / botui Goto Github PK

View Code? Open in Web Editor NEW

2.8K 58.0 367.0 3.18 MB

🤖 A JavaScript framework for building conversational UIs

Home Page: https://botui.org

License: MIT License

JavaScript 30.24% HTML 1.41% SCSS 7.24% CSS 3.29% TypeScript 57.82%

botui chat bot conversational-ui javascript react typescript

botui's Introduction

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

botui's People

Contributors

Stargazers

Watchers

Forkers

douglasevaristo ttluan411-zz bran921007 kkac bansicloud josh-leeming hhy5277 anthu sagarora77 calezilla fengweijp jqueryalmeida concepx davidalves1 meetbryce anandselva liviupop lyrl yehyork stefcab bodonkey davidpaulsson naimikan rzvcereno haochuan surajpaib m-khosravi karamata serendipious jerry-goodboy commandfox 19ai codefork amorist wcchow4 iam-rocketman zoosky allanlasser shadowcz007 jogiter ipante krisaoe wintelligen glacierck zhangtinghang athiwatp luannguyenqv nullality clement21 semmel alantsen gitter-badger peshkov3 mikalv akshitabansal97 codinger41 jslibrarydirectory tanyaguru chrisstack94 baninaveen leme7 blackgeeknerd 5idu hafidzi forever-j fewiki chenyuan8059 openmentors layah coderoarfromror codemilan hudawei996 ryan-pek faker-a javiplav emorywang obaqiang zhuyunji jason88888 techbuzzz tawandabrandon jacqui hugoren rahullakhaney revcozmo skyformat99 mikuh gitbywe nextiams design-today poljeff jucasoliveira 30s cderfdsa catalina1090 pickwei hyacinthehamon qianzf teanoon jessekahner

botui's Issues

Cannot attach DOM with Pjax

Will which function BOT-UI call each time you refresh the page? I hope to add it to delay call of pjax:popstate , thank you ~

Nuxt example? I got Element ID doesn't exist

I'm getting this error:

Uncaught (in promise) Error: BotUI: Element with id #sample-bot does not exist.

And here's my code:


<template>
  <div>
    <h1>BOTUI test</h1>
    <no-ssr>
    <div id="sample-bot">
      <div id="sample-bot">
        <bot-ui></bot-ui>
      </div>
    </div>
    </no-ssr>
  </div>
</template>

<script>
import initBot from '@/botui/sample-bot.js'

export default {
  async mounted () {
    await initBot()
  }
}
</script>

Anyone have working example with Vue Nuxt?

markdown images are not appearing

Hi, I can not get the markdown images working.

Here is my code:

(...)

this.bot = new BotUI('my-botui-app');
this.bot.message.add({
      content: 'Hey! 👋',
      cssClass: 'botui-no-icon',
      delay: 1000
})
.then(() => this.bot.message.add({
      cssClass: 'botui-no-icon',
      content: 'Here is an image ![product image](https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg)',
      delay: 500
}));

(...)

The visual output is:
Here is an image

also, inspecting the HTML:

<div class="botui-message-content text"><span>Here is an image </span> <!----></div>

you can see, that it is just empty…

There are no JS errors in console…

I used version 0.3.4 of your bot.
I am on Version 66.0.3359.181 (Official Build) (64-bit)

Integrations?

Hola

Es muy chevere este botui, consulta, están pensando en integraciones con plataformas (workplace, slack, etc)?

rendering an html div in botui div

I'm trying to embed an html div into a botui view.

I want to embedd progress bar div, my bot is a survey interface and I want to show a progress bar for the user. So far, I can display the progress bar above or under the but not inside.

How would I go about embedding a div onto the bot view?

Conflict with v-model in an existing vue project

Hi all. I have an existent vue project ([email protected]) and now i'm trying to install botUI into it. So:

I've edited webpack config:

module.exports = {
  // use inline sourcemap for karma-sourcemap-loader
  resolve: {
    extensions: ['', '.js', '.vue'],
    alias: {
      vue: 'vue/dist/vue.min.js',
    },
  },
...

I've imported botUI in my main.js file
I've instanced botUIn my main.js file

const botui = new BotUI('hello-world', {
  vue: Vue, // or this
});

botui.message.add({
  content: 'Hello World from bot!',
});

botui.message.add({
  human: true,
  content: 'Hello World from human!',
});

I've added botUI into my template in index.html file

<body>
  <div id="app"></div>
  <div class="botui-app-container" id="hello-world">
    <bot-ui></bot-ui>
  </div>
</body>

Now, i'm seeing this error in the browser console:

[Vue warn]: Error compiling template:

<div class="botui botui-container" v-botui-container><div class="botui-messages-container"><div v-for="msg in messages" class="botui-message" :class="msg.cssClass" v-botui-scroll><transition name="slide-fade"><div v-if="msg.visible" :class="[{human: msg.human, 'botui-message-content': true}, msg.type]"><span v-if="msg.type == 'text'" v-text="msg.content" v-botui-markdown></span> <iframe v-if="msg.type == 'embed'" :src="msg.content" frameborder="0" allowfullscreen></iframe></div></transition><div v-if="msg.loading" class="botui-message-content loading"><i class="dot"></i><i class="dot"></i><i class="dot"></i></div></div></div><div class="botui-actions-container"><transition name="slide-fade"><div v-if="action.show" v-botui-scroll><form v-if="action.type == 'text'" class="botui-actions-text" @submit.prevent="handle_action_text()" :class="action.cssClass"><i v-if="action.text.icon" class="botui-icon botui-action-text-icon fa" :class="'fa-' + action.text.icon"></i> <input type="text" ref="input" :type="action.text.sub_type" v-model="action.text.value" class="botui-actions-text-input" :placeholder="action.text.placeholder" :size="action.text.size" :value="action.text.value" :class="action.text.cssClass" required v-focus/> <button type="submit" :class="{'botui-actions-buttons-button': !!action.text.button, 'botui-actions-text-submit': !action.text.button}"><i v-if="action.text.button && action.text.button.icon" class="botui-icon botui-action-button-icon fa" :class="'fa-' + action.text.button.icon"></i> <span>{{(action.text.button && action.text.button.label) || 'Go'}}</span></button></form><div v-if="action.type == 'button'" class="botui-actions-buttons" :class="action.cssClass"> <button type="button" :class="button.cssClass" class="botui-actions-buttons-button" v-for="button in action.button.buttons" @click="handle_action_button(button)" autofocus><i v-if="button.icon" class="botui-icon botui-action-button-icon fa" :class="'fa-' + button.icon"></i> {{button.text}}</button></div></div></transition></div></div>

- :value="action.text.value" conflicts with v-model on the same element because the latter already expands to a value binding internally


found in

---> <BotUi>
       <Root>
app.js%20line%20600%20%3E%20eval:580:

What i'm doing wrong? seems pretty simple...

Thank you! 😄

The SRC code is compiled.

The source code is compiled and this difficult a lot the comunity endeavor.

Webpack/rollup

Using an IIFE is great for using this library directly in the web browser, but sadly this makes the library difficult to use in webpack/rollup (I can't actually get it to work).

What would be great is the ability to use botui as part of my existing application:

import BotUI from 'botui'
const botui = new BotUI('xyz')

You could then use your existing gulp tasks to publish the commonjs module (http://know.cujojs.com/tutorials/modules/authoring-cjs-modules) as an IIFE (as it currently is)

In its current state, it's difficult to integrate cleanly into other projects which might want to use it.

HTML tag

Hi, first of all, well done, it's a really good bot! So thank you to share it with us.

It's not a real issue, I'm trying to add some html tag inside the text I display in response.
So basically I write this:

"Great! I know really well " + res.value +"!

But there is no bold text on the front end, do I need to add a function somewhere or my code sucks?

Thanks in advance.

IE11 Troubles with ES6Promise

botui doesn't work in IE11 because of a problem with ES6Promise
'Promise' is undefined

Latest Version with Webpack

Using this in Vue CLI initialized project

How do I import this inside a Vue CLI initialized project?

I did npm install and setup in main.js, but it doesn't appear.

Feature request : Get all messages

Can we have a feature to get all messages?
E.g.

botui.message.getAll()

I'd be happy to contribute 😃

Question / improvement regarding action.button + action.text at the same time.

Amazing project! Thank you for sharing this code!

I am almost done with a script that I have to implement, but this specific case here I can not manage to accomplish. So it maybe an unexcpected behavior, or an improvement that could be implemented.

The flow is:

User question: "What do you have to say?" (as action.text) OK
Then another question: "Do you have anything else to say?"

The second step is a problem.

I do not want the user to say "yes" then ask again for a text, I want instead to provide a button with a "finish" (which my flow already recognizes) and at the same time ask for more input. So it could be:

User question: "What do you have to say?" (as action.text) OK
Then another question: "Do you have anything else to say?" (message.add) + (action.button with "no, that's all") + (action.text + "enter your text here")

This is what I'm doing:

message.add : "{ 'autoHide': false, 'delay': '1000', 'loading': true, 'content': 'Got it, anything else to say?' }"

action.button: "{ 'addMessage': false, 'autoHide': false, 'action': [  { 'text': 'Finish', 'value': 'Finish' } ] }"

action.text : "{ 'addMessage': false, 'autoHide': false, 'action': { 'placeholder': 'type here' } }"

But the 3 line (action.text) removes the (action.button). If I swap those lines, (action.button) removes (action.text).

I tryed to use autoHide, to keep the button, or keep the action.text, but no clue.

Is there any solution for this?

I think that there are many ocasions that it could be used, like asking "What State do you live? Click on a button below or type the name of the Sate".

Thank you!

index.html:622 Uncaught (in promise) TypeError: botui.action.select is not a function

Am testing the botui.action.select .

tried using the sample from the site or my version (which inspired from the sample) but it fails.

any idea on how to fix? (I don't have a local repository)

Thanks

in my index.html I have:

8< 8< 8< snip 8< 8< 8< 8< 8< 8< 8<
<script src="https://unpkg.com/botui/build/botui.min.js"></script>
<script src="https://unpkg.com/botui/build/botui.js"></script>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
8< 8< 8< snip 8< 8< 8< 8< 8< 8< 8<

when it reach the following the error is raised (chrome)

    var askNbrPlace = function(){
            botui.message.add({
                delay: 1000,
                content: "Pour quel jour??"
                }).then(function (){
            botui.action.select({
                action: {
                placeholder : "Nombre de convives", 
                value: 2,
                searchselect : true,
                label : 'text',
                options : [
                    {value: "un" , text : "1 Personne" },
                    {value: "deux", text : "2 Personnes" },
                    {value: "trois", text : "3" },
                    {value: "quatre", text : "4" },
                    {value: "cinq", text : "5" },
                    {value: "six", text : "6" },
                            ],
                button: {
                icon: 'check',
                label: 'OK'}
                }
                }).then(function(res) { 
            botui.message.add({
                delay: 1000,
                content: 'Nous serons ' + res.value
                });
                    }); 
                        });
                            }

Show checkbox or radio button

Hi,

I am trying your api on my local machine. How do I show checkboxes or radio buttons ?

I have this code

        }).then(function(){
          botui.action.text({
          action: [{
              sub_type: 'checkbox',
              value: 'language_revenue_growth'
            }]
          })
        });

but it shows up as input type text

html becomes text after action.text is used

my server side returns html and it display when being sent, but when the action.text or bot is used at the frontend it becomes text. I did not look at the code, but clearly this is a bug.

IS THAT MOBILE RESPONSIVE

I have loaded chat-bot in mobile, its looks like responsive but when the response comes its not automatically scrolling down.

Any suggestion please,

Thanks in advance,

Image removed if actions are added after it.

I'm trying to add image just before the actions. But image removed when action button comes in. Can you please look in whats happening.

Ex.

homeBot.message.add({
  content: 'Hello there!'
}).then(function () {
  return homeBot.message.add({
    delay: 1500,
    content: 'Wanna see a demo of what BotUI can do?![product image](https://example.com/image.png)'
  });
}).then(function () {
  return homeBot.action.button({
    delay: 1000,
    action: [{
      text: 'Sure!',
      value: 'sure'
    }, {
      text: 'Just skip to end 😒',
      value: 'skip'
    }]
  });
})

In above example you can see image tag removed.

A "loading" message with a delay cannot be updated

If a message is added with loading: true and delay: someDelay but no content, it will display an empty message when it is updated, rather than the message set by the update. I think there are two bugs in play here:

There's a logical inconsistency with the use of the delay parameter. On non-loading messages, it prevents the message element from appearing in the UI at all until the delay expires. But on loading messages, the message element appears in the UI immediately, although with the loading dots instead of a message. I think that for consistency, the delay should always apply to the timing of the entrance of the message into the interface, rather than to the appearance of text within the message. I'd recommend either adding a new parameter, textDelay, which would control the timing of a message appearing to have loaded, or throwing an error if no content is provided and you wish to preserve the existing behavior.
In a message with a delay and loading: true but no content, the message will remain in a loading state until it is updated, but the content of the message will remain undefined. If the message is updated, it should fill with the content of the updated message, not the original content.

Multi line message

I am unable to add a multiple lines with in a single message. It is converting into a single string and displaying it. And also it is trimming extra spaces between words.

Uncaught TypeError

Uncaught TypeError: Cannot read property 'directive' of undefined

How to add drop down

Is there any way to add select ( drop down ) value ?

Question regarding generating dynamic actionable button

Hi,
Great framework. Its very easy to use. Thanks for sharing.
I have question regarding the actionable buttons. Is there any way you can add buttons dynamically may be based one result from the database?

Thanks for your help.

Write example as async function

I think bot code looks better ® when written as async function.

eg. main example would look like

var botui = new BotUI('botui-app'); // give it the id of container

async function conversation() {
  await botui.message.bot({
    // show first message
    delay: 200,
    content: 'hello',
  });
  await botui.message.bot({
    // second one
    delay: 1000, // wait 1 sec.
    content: 'how are you?',
  });
  const res = await botui.action.button({
    // let user do something
    delay: 1000,
    action: [
      { text: 'Good', value: 'good' },
      { text: 'Really Good', value: 'really_good' },
    ],
  });
  await botui.message.bot({
    delay: 1000,
    content: 'You are feeling ' + res.text + '!',
  });
}

Why earlier inputs are not showing?

Hello
I was trying to make "A doctor/hospital appointment scheduling bot" on the basis of example bots provided.
Code as below for javascript. My problem is the input fields are NOT displaying if there are more than one and displaying the last one.
Why earlier inputs are not showing?
var botui = new BotUI('doctor-appointment');
var lady = 'Mariam';
var area = "Enter your location";
var department = "Enter your department";
botui.message.bot('Hi, I am ' +lady+ '!');
botui.message.bot('Welcome to Hospital of Angels in Heaven!');
botui.message.bot('How can I help you?');
botui.message.human({
delay: 500,
content: 'Hello ' +lady+ '!'
});
botui.message.human({
delay: 1000,
content: 'I want to schedule an appointment with your hospital expert consultants'
});
botui.message.bot({
delay: 1500,
content: 'Please write your location below:'
})
.then(function () {
return botui.action.text({
delay: 2000,
action: {
size: 30,
icon: 'map-marker',
value: area, // show the saved location if any
placeholder: 'Area'
}
})
}).then(function (res) {
botui.message.add({
human: true,
delay: 2500,
content: 'Location is: ' + res.value
});
area = res.value; // save location
});
botui.message.bot({
delay: 3000,
content: 'You are looking for a doctor in which department?'
})
.then(function () {
return botui.action.text({
delay: 3500,
action: {
size: 30,
icon: 'map-marker',
value: department, // show the saved department if any
placeholder: 'Department'
}
})
department = res.value; // save department
});

With Regards
Gopinathan K. Munappy

need tu put some actions value in a URL

am new in html/css/php ... and co.
I need to write a bot which asks some questions to gather some specific values .
Values I need to pass as parameter to a URL .

How can I proceed ?

This might be evident but ...

chaining messages kills rich contents if not last in chain

Whenever I chain another message after a message that contains any rich content (like links or images), the rich contents get deleted (images) and the links are removed and the message will just display the plain text instead. It is 100% reproducable.

homeBot.message.add({ delay: 1000, content: 'some text' }).then(function () { return homeBot.message.add({ delay: 1900, content: 'here some links:' }); }).then(function () { return homeBot.message.add({ delay: 1600, content: '!(book) [Portfolio-PDF](https://www.alleherzen.de/downloads/Alleherzen_Portfolio.pdf) or visit the [Website](https://www.alleherzen.de).' }).then(function () { return homeBot.message.add({ delay: 1600, content: 'some more text' }); }); });

It can even be reproduced by just calling message add several times in a row like this:
` homeBot.message.add({
delay: 1000,
content: '!(book) Portfolio-PDF or visit the Website.'
});

homeBot.message.add({
content: 'some more text'
});`

Any ideas on that issue? I am totally lost here.

AngularX integration

First off all thank you for this nice library.
I'm trying to integrate it into an Angular4-CLI project but without success.
Can you give me some hints?

last cdnjs' version is 0.3.4

last version is 0.3.4 without select option

When embedding botui in iframe, autoscrolling to the bottom doesn't work.

When embedding botui in an iframe, autoscrolling down to the bottom of the page after a new message doesn't work. Is there a workaround/solution for this?

Here is a test link I made showing the issue.

http://ally.include.ai/scrolltest.html

I am not too familiar with Vue but I saw that the _container is used for autoscroll. Not sure how this mechanism is being affected by being embedding in an iframe though!

Adding two actions simultaneously overrides the first action

Hey @moinism, thanks for the awesome framework!

I need to show a list of choices as action buttons and also display a text field below the list, allowing user input from either action (like in Google Assistant). When I try to add both actions though it is always the second action that is rendered inside the actions div, overriding the first action. Is it possible to do what I want to, have two actions render one below the other at the same time?

Also, if I could do that, what would be the best way to listen for input on both actions, since each would return a separate Promise?

Label of the confirm button for the Text Action

Browsing the source, docu and the examples I could not find an option to change the label of the confirm button from "Go". It seems to be fixed in the source.

Would it make sense to add these configuration properties

button: {
    icon: 'some-awesome-icon',
    text: 'Send'
}
// or
button_icon:  'some-awesome-icon',
text: 'Send'

to botui.action.text ?

Question: what's the best way to branch/repeat a path of conversation?

I like the idea and implementation. Good job!

My question is: what's the best way to approach a repeating scenario? Say I ask you for something in step 1, ask for another detail in step 2, deliver a result in step 3, and now want to get back to step 1. Recursion can work I assume, with me calling the function again in the last step. But isn't there a better way?

Similarly, do you have any recommendation about branches? the promise chain is one directional. What if I need something more tree like? Will I put every branch of the tree in a separate function and call it in the last step?

I believe some documentation around these scenarios would be beneficial (but I'll be satisfied with an answer :)).

Feature Request

1>Can we have a typing effect to make it more humanly

Example
https://i.giphy.com/media/m0hgeVAAFV6O4/source.gif

2>Can we autoplay embedded youtube video

Incompatible with Vuejs

Hi, I tried the method listed in the docs to import it into a vuejs project but I was unsuccessful. Any tips on doing so ?

External resources

What a great project and looks very useful for devs! Hope to see it continue to mature and improve.

In botui.js there are some external resources:

    _fontAwesome = 'https://use.fontawesome.com/ea731dcb6f.js',
    _esPromisePollyfill = 'https://cdn.jsdelivr.net/es6-promise/4.1.0/es6-promise.min.js'; // mostly for IE

It would be great to see more configuration options supported. I need to host everything locally, would probably use Material Design Icons (since I already have them loaded) rather than FontAwesome. and the URLs probably don't belong in the main script.

AutoHide is not working properly in action button

Hi guys,

i am using autohide to hide the button after the clicking, i am following the docs. but its not working properly

botui.action.button({
  autoHide: false,
  action: [
    {
      text: 'One',
      value: 'one'
    }
  ]
}).then(function (res) { // will be called when a button is clicked.
  botui.action.hide(); // hide the button whenever you want.
});

Please help, Thanks in advance

Question: Yes No Logic?

Apologies if I missed it but is there a way to add logic to buttons? For example can a user go down a yes path or a no path?

When there are many buttons, the layout collapses.

Hello, I appreciate your great "BotUI".
When there are many buttons, the layout collapses.
(The left end is not aligned. And There is no space between 'android' and 'Firefox OS'.)
I want to arrange the layout.
Please tell me a good way. Or is it a Bug?

Result:

Code:

var botui = new BotUI('demo-apps');

botui.message.bot({
    content: 'What mobile OS do you like?'
}).then(function(){
    botui.action.button ({
        action: [{
            icon: 'android',
            text: 'android',
            value: 'android'
        }, {
            icon: 'apple',
            text: 'iOS',
            value: 'iOS'
        }, {
            icon: 'windows',
            text: 'Windows',
            value: 'Windows'
        }, {
            icon: 'firefox',
            text: 'Firefox OS',
            value: 'Firefox OS'
        }]
    });
});

Confirmed environment

Computer
- macOS High Sierra ver.10.13.4
Web browser
- Google Chrome : ver.66.0.3359.139
- Firefox : ver.59.0.2
- Safari : ver.11.1

Please confirm.
Thank you.

Extra information in actions

Hi! Thank you so much for this awesome package.

I want to add some extra information in action structure, but it seems doesn't work.

botui.action.button({
   delay: 500,
   action: [
      {
         text: 'Button 1',
         value: 1,
         extra: 'Something'
      }, {
         text: 'Button 2',
         value: 2,
         extra: 'Something'
      }, {
         text: 'Button 3',
         value: 3,
         extra: 'Something'
      }
   ]
});

Is there any way to do it?

Thank you!

Markup rendering fails with delay option and Vue >2.0.7

E.g.: Links are not rendered when the message is delayed and the Vue version is greater than 2.0.7.

You can play with this Codepen to check the behaviour when changing Vue's version or setting the delay option.

I currently have no idea about Vue, but I hope this helps.

Thank you.

Bot UI with RASA NLU

Hi,
I am trying to build a UI with BOT UI and have RASA for NLU processing. I am using flask to build a interface in Python.
How to use fields that gets the user message . Like below :
<p>Message<input type = "text" name = "Name" /></p>
<p><input type = "submit" value = "submit" /></p>

Python : user_message = request.form['Name']

botui.action.select is not a function

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

Add 'loading' has messed up message animation

Messages with delay now show a 'loading' state and content is displayed after the delay ends. This has effected the message animation.

This should be worked on.

BotUI not loading in Internet Explorer

Hi there,
Bot UI is not loading in the Internet Explorer. I have inspect element and i see
is not generating the directive.

Any help please.

URLs and images disappear.

After displaying contents including "URLs" and "images" as Bot's message, if you do "botui.action.text", "URLs" etc will disappear.

If you write code like the following, URLs etc will disappear.

I am sorry if I am a difficult expression to understand because I am not good at English.

botui.message.add({
content: 'Go ahead, try our product'
})

botui.message.add({
content: "Here is an image "
})

botui.action.text({
delay: 1000,
action: {
placeholder: '*input'
}
});

botui + Meteor.js

Hey,

I'm using meteor and I can't seem to get BotUI to work. I have vue installed and everything imported (however, not completely sure if I did that right) and I always get ´TypeError: Cannot read property 'messages' of undefined´

Anyone with similar problems and/or solutions?

Multiple lines

Is it possible to have multiple lines inside of a message?

Either by using a <br> or directly in the message?

Thanks!

Markup / URL / IMG in bot not working

Hey there,

i am not able to use URL or IMG in the chatbot. Maybe you can help me out here?

return botui.message.add({
  delay: 1000,
  loading: true,
  content:'Some companies i recently worked for:'
}).then(function (){
  return botui.message.add({
    delay: 1000,
    loading: true,
    content:'- [Shore](www.shore.com)^'
  });
});

List of buttons

Good afternoon, I would like the buttons to be displayed below each other as a list, currently they only stand side by side, I tried to use a cssClass, but it does not make changes to the button, I'm doing a faq bot and I'm using the buttons as object of the question, so if they appeared one below the other would facilitate, but since it is in the same array side by side, could help me in this matter? I'm using NodeJS