Easy chatbot UI customization.I made a library “Koe UI”

Easy chatbot UI customization.I made a library “Koe UI”

Easy chatbot UI customization.I made a library

Hello, this is Okada!

We have introduced several times how to interact with bots made by Microsoft Bot Framework from a web browser.

This time, I made a library “Koe UI” that allows anyone to easily install a bot on a website and customize the UI. I will also introduce you to the points that I struggled with!

I hope it will be of help to those who are trying to make a bot.
>> Koe UI demo page

KoeUI demo show

To interact with bots from a web browser using the Microsoft Bot Framework, mechanisms such as WebChat and Direct Line API can be used.

However, there were problems such as not being able to customize the UI, or having to create the UI from scratch even if it could be customized.

So, KoeUI allows you to customize the UI while keeping the features of WebChat that can be easily installed!

Of course, there is no need to create a UI from scratch.

Technologies used in KoeUI

This library mainly uses the following technologies.

  • Direct Line API: connection with bot
  • jQuery: UI animation
  • Riot.js: Invoke componentized UI
  • Fetch API: Communication with DirectLineAPI
  • promise: Control order of processing
  • cookies: Save Conversation Id

What Promise are you using here? ?

A Promise is a mechanism for managing “processes that are promised to end someday, although we don’t know when they will end”. In this case, it is HTTP communication with Direct Line API.

Originally, we do not know when the result will be returned from the API, but if you manage it with Promise, you can know the timing when the result is returned from the API.

Koe UI uses promises to control the order of processing. Specifically, the processing order is as follows.

Send message to API

Show loading animation

Get message from API

Display remarks on UI ・Scroll to the bottom

Hide loading animation

The source code is available on GitHub, so please take a look if you want to know more.

Just paste the tag to install it on your website!

One of the things we focused on with Koe UI was the ease of installation.

The installation method is to first write the script tag for the necessary library and processing,

<script src="http://getdata.rugal.info/2022/07/24/%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%83%9C%E3%83%83%E3%83%88ui%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%82%92%E7%B0%A1%E5%8D%98%E3%81%AB%E3%80%82%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9/assets/js/vender/jquery-1.12.4.min.js"></script>
<script src="assets/js/vender/riot+compiler.min.js"></script>
<script src="assets/js/koeUIcore.js"></script>
<script src="assets/js/riot-tags/koe-ui-basic.tag" type="riot/tag"></script>
<script>riot.mount('*');</script>

Next, add a tag to call the UI belowJust paste it wherever you like.

<koe-ui-basic token="_YOUR_DIRECT_LINE_API_SECRET_KEY_"></koe-ui-basic>

Installation instructions

With just this work, you can embed a bot in your website.

About original tags

If you look closely, you’ll see an unfamiliar tag called . This is a unique tag for Koe UI, and the chat UI will be displayed where this tag is pasted.

The ease of installation is achieved byA framework called Riot.js.Riot.js is a framework for JavaScript web applications like React and Angular. The biggest feature is that it is micro-oriented and component-oriented.

There is a file called koe-ui-basic.tag in the script to load. HTML, CSS, and JavaScript are all gathered in this, and the content is expanded in the tag.

Since HTML and CSS are designed to be complete only within this,Less likely to interfere with other partsIt looks like

Therefore, those who use the library can embed the chat UI just by pasting the tag without thinking about difficult things!

One of the features of KoeUI.Easy customization of chat UI

As introduced earlier, the HTML and CSS for the UI are contained within koe-ui-basic.tag. You can customize it by changing the HTML and CSS in it.

As an example, let’s change the message color to dark blue like Facebook Messenger!

The tag names and class names of the main parts of the UI are as follows.

Class description of UI

Now let’s change the CSS.
The CSS source code is on lines 39-163.

This time, we want to change the colored message part to dark blue, so change the class .message._me part.

.message._me > span {
  color: #fff;
  background: #41e667;
}

is the part that specifies the color.
here,

.message._me > span {
  color: #fff;
  background: #4080ff;
}

and save it.

After color change

It has been changed! It’s a little more like Facebook!

If you look closely at CSS,
.message , input , button , etc.
You may be worried that the CSS specification is too general and conflicts with other parts, but don’t worry, as I introduced earlier, it won’t interfere.

CSS range is adjusted

Feel free to write CSS!

Scoped CSS is a CSS specification that “applies styles only in a specific range”. Although there are still few browsers that support this technology, it is attracting attention as component orientation spreads.

Riot.js allows the use of scoped CSS notation.

Customization is also possible by modifying the HTML.

If you want more customization, try changing the HTML as well.

<!-- Google Material Icon -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="chatScreen">
  <div class="message _welcome">
    <span>Hi, I am a bot! How are you?</span>
  </div>
  <div each="{ msgObj.messages }">
    <div class="message {filter_me( from )}">
     <span>{ text }</span>
    </div>
  </div>
</div>
<div>
  <form onsubmit="{ send_and_polling }">
    <input type="text" onkeyup="{ edit }">
    <div class="loader">loading</div>
    <button disabled="{ !text }">
      <i class="material-icons">send</i>
    </button>
  </form>
</div>

The HTML part has a special notation for Riot.js. The part enclosed in { } is automatically converted by Riot.js.

From top to bottom, I will give a brief explanation of HTML.

You can change the initial message by changing the “Hi, I am a bot! How are you?” part.

The part of each=”{ msgObj.messages }” means to loop the part of

for the messages obtained by Direct Line API. This part shows the interaction between the user and the bot.

{filter_me( from )} will have a class of _me if it was a user-side remark. With this, the bot side and user side remarks are color-coded.

is set to call a function that starts sending messages and polling when the form is submitted.

determines the text input field.