BotUI: Display an animated loading screen prior to performing any actions

Question

BotUI: Display an animated loading screen prior to performing any actions

When using BotUI (Docs), I want the loading animation to appear before actions (such as buttons) show along with messages.

var botui = new BotUI('hello-world');

botui.message.add({
  content: 'Hello world from bot!'
}).then(function() {
  return botui.message.add({
    delay: 3000,
    human: true,
    content: 'Hello world from human!'
  });
}).then(function() {
  return botui.message.add({
    delay: 3000,
    content: 'Another hello world from bot!'
  });
}).then(function() {
  return botui.message.add({
    delay: 3000,
    human: true,
    content: 'Another hello world from human!'
  });
}).then(function () {
  return botui.action.button({
    delay: 3000,
    action: [{
      text: 'Some button',
      value: 'button1'
    }, {
      text: 'Another button',
      value: 'button2'
    }]
  });
}).then(function (res) {
  if(res.value == 'button1') {
    console.log('Some button was clicked.');
  }
  if(res.value == 'button2') {
    console.log('Another button was clicked.');
  }
});

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
.botui-container {
  font-size: 14px;
  background-color: #fff;
  font-family: "Open Sans", sans-serif;
}

.botui-messages-container {
  padding: 10px 20px;
}

.botui-actions-container {
  padding: 10px 20px;
}

.botui-message {
  min-height: 30px;
}

.botui-message-content {
  padding: 7px 13px 17px 13px;
  border-radius: 15px;
  color: #595a5a;
  background-color: #ebebeb;
}

.botui-message-content.human {
  color: #f7f8f8;
  background-color: #919292;
}

.botui-message-content.text {
  line-height: 1.3;
}

.botui-message-content.loading {
  background-color: rgba(206, 206, 206, 0.5);
  line-height: 1.3;
  text-align: center;
}

.botui-message-content.embed {
  padding: 5px;
  border-radius: 5px;
}

.botui-message-content-link {
  color: #919292;
}

.botui-actions-text-input {
  border: 0;
  outline: 0;
  border-radius: 0;
  padding: 5px 7px;
  font-family: "Open Sans", sans-serif;
  background-color: transparent;
  color: #595a5a;
  border-bottom: 1px solid #919292;
}

.botui-actions-text-submit {
  color: #fff;
  width: 30px;
  padding: 5px;
  height: 30px;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid #919292;
  background: #777979;
}

.botui-actions-buttons-button {
  border: 0;
  color: #fff;
  line-height: 1;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  background: #777979;
  box-shadow: 2px 3px 4px 0 rgba(0, 0, 0, 0.25);
}

.botui-actions-text-select {
  border: 0;
  outline: 0;
  border-radius: 0;
  padding: 5px 7px;
  font-family: "Open Sans", sans-serif;
  background-color: transparent;
  color: #595a5a;
  border-bottom: 1px solid #919292;
}

.botui-actions-text-searchselect {
  border: 0;
  outline: 0;
  border-radius: 0;
  padding: 5px 7px;
  font-family: "Open Sans", sans-serif;
  background-color: transparent;
  color: #595a5a;
  border-bottom: 1px solid #919292;
}

.botui-actions-text-searchselect .dropdown-toggle {
  border: none !important;
}

.botui-actions-text-searchselect .selected-tag {
  background-color: transparent !important;
  border: 0 !important;
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-enter,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateX(-10px);
}

.dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.5rem;
  display: inline-block;
  background-color: #919292;
}

.dot:nth-last-child(1) {
  margin-left: 0.3rem;
  animation: loading 0.6s 0.3s linear infinite;
}

.dot:nth-last-child(2) {
  margin-left: 0.3rem;
  animation: loading 0.6s 0.2s linear infinite;
}

.dot:nth-last-child(3) {
  animation: loading 0.6s 0.1s linear infinite;
}

@keyframes loading {
  0% {
    transform: translate(0, 0);
    background-color: #ababab;
  }
  25% {
    transform: translate(0, -3px);
  }
  50% {
    transform: translate(0, 0);
    background-color: #ababab;
  }
  75% {
    transform: translate(0, 3px);
  }
  100% {
    transform: translate(0, 0);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/botui/build/botui.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/botui/build/botui.min.css">
<div class="botui-app-container" id="hello-world">
  <bot-ui></bot-ui>
</div>

I have pinpointed the relevant template section in botui.js.

<div v-if=\"msg.loading\" class=\"botui-message-content loading\"><i class=\"dot\"></i><i class=\"dot\"></i><i class=\"dot\"></i></div>

However, because the content of the botui-actions-container is loaded after a delay, I am unable to show the loading animation before the buttons appear.

javascript css vue.js chatbot

Answer 1

Answer №1

Attempting to alter the functionality of a third-party component is generally not recommended. If you find yourself in this situation, the most effective approach may be to create a new request on their Github page. Clearly outline your needs and there's a chance they will incorporate the desired feature into their component.

Answer 2

Attempting to alter the functionality of a third-party component is generally not recommended. If you find yourself in this situation, the most effective approach may be to create a new request on their Github page. Clearly outline your needs and there's a chance they will incorporate the desired feature into their component.

Answer 3

Answer №2

To achieve the desired outcome without altering the internal workings of BotUI, you can utilize botui.message.add along with botui.message.remove to display loading before executing an action. This method allows the loading feature to appear before the action, even though botui.action does not have a built-in loading parameter.

The following code showcases how I implement this approach using botui.action.button, but any action can be used. By setting delay: 0 for the action, it will replace the loading indicator without displaying a blank message if the initial message is not removed.

// add an empty message to use the "loading" feature not available with action
botui.message.add({
    delay: 2000,
    loading: true,
    content: ''
}).then(function (index) {
    // get the index of the empty message and delete it
    botui.message.remove(index);
    // display action with 0 delay
    botui.action.button({
        delay: 0,
        action: [{
            text: 'Action 1',
            value: 'a1'
        }, {
            text: 'Action 2',
            value: 'a2'
        }]
    }).then(function (res) {
        botui.message.bot({
            delay: 1000,
            content: 'action chosen: ' + res.value
        });
    });
});

Answer 4

To achieve the desired outcome without altering the internal workings of BotUI, you can utilize botui.message.add along with botui.message.remove to display loading before executing an action. This method allows the loading feature to appear before the action, even though botui.action does not have a built-in loading parameter.

The following code showcases how I implement this approach using botui.action.button, but any action can be used. By setting delay: 0 for the action, it will replace the loading indicator without displaying a blank message if the initial message is not removed.

// add an empty message to use the "loading" feature not available with action
botui.message.add({
    delay: 2000,
    loading: true,
    content: ''
}).then(function (index) {
    // get the index of the empty message and delete it
    botui.message.remove(index);
    // display action with 0 delay
    botui.action.button({
        delay: 0,
        action: [{
            text: 'Action 1',
            value: 'a1'
        }, {
            text: 'Action 2',
            value: 'a2'
        }]
    }).then(function (res) {
        botui.message.bot({
            delay: 1000,
            content: 'action chosen: ' + res.value
        });
    });
});

BotUI: Display an animated loading screen prior to performing any actions

Answer №1

Answer №2

Similar questions

"Creating a new object in ThreeJs by deriving from an existing object

Performing an HTTP GET Request in Node.js or Express.js

The NextJs router encountered an unknown key passed through the urlObject during the push operation

Reversing the order of input-group-addon and input in bootstrap on mobile devices

How can I incorporate a custom color into a preset navbar on an HTML webpage?

Encountering an Uncaught TypeError occurs when attempting to access properties of undefined, specifically while utilizing an object method with arrays

Adjust the component's onClick property in Next.js

The Angular/Bootstrap Modal is not functioning properly: TypeError occurs due to v2.deleteModalProject not being recognized as a function and

What could be causing the lack of styling in my Express application?

What is the best way to access the validation group in a javascript event?

Order the AJAX information within a table using tablesorter.js

Can the combination of a JavaScript frontend and NodeJS backend function effectively together in this scenario?

Ways to extract the maximum value from a dataset formatted in JSON

Can you explain why when using `<button>` within `<input type="file" />` it doesn't activate the native file selector, but it works fine with `<div>`?

Clicking on navigation does not close Bootstrap dropdown

Changing the positioning of divisions based on screen size, transitioning from 1200px width and larger to mobile devices

Ways to prevent styles from being overridden by those specified in JavaScript

Neglecting to utilize a parameter in a function

Having trouble with Grunt and Autoprefixer integration not functioning properly

As the object rotates, the camera in Three.js dynamically follows suit, creating a