Botkit: Botkit + Jabber HTML formatting problems

Created on 23 Nov 2018 · 5Comments · Source: howdyai/botkit

Hi @ all!

currently I am doing some minor experiments with Jabber Bot and Rich Text Messages (HTML + CSS). Following the information here and here Botkit + Jabber is able to display HTML5 Content + Bootstrap CSS 3.2. In my case I have major formatting problems with displaying the HTML content properly.

Jabber Version: 12.1.1.19866
Botkit Version: v0.6.20


const Botkit = require("botkit");
const xml = require("@xmpp/xml");

var controller = Botkit.jabberbot({
    json_file_store: "./bot_store/"
});

var bot = controller.spawn({
    client: {
        jid: "...",
        password: "...",
        host: "...",
        port: 5222
    }
});

controller.hears(["html123"], ["direct_mention", "direct_message"], function(
    bot,
    message
) {
    let reply_message = {};
    let to = message.user;
    let type = message.group ? 'groupchat' : 'chat';
    let body = 'html demo(only for Jabber Windows now)';
    reply_message.text = body;
    reply_message.stanza = xml`<message to="${to}" type="${type}"><body>${body}</body>
    <html xmlns="http://jabber.org/protocol/xhtml-im">
    <body xmlns="http://www.w3.org/1999/xhtml">

    <div class="container">
  <h2>Hover Rows</h2>
  <p>The .table-hover class enables a hover state on table rows:</p>            
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

    </body>
    </html></message>`;
    bot.reply(message, reply_message);
});

Expected output for this message is something like here

2018-11-23 14_11_08-tryit editor v3 5

Actual output:

2018-11-23 14_21_23-chatbot robby

Any ideas for how to optimize the results?

Thank you very much and best regards,
Daniel

help wanted jabber-related stale

Source

mindactuate

All 5 comments

Hey,
I was playing with HTML for a little bit there and I noticed a fun thing - I don't know if it will work for your bot, but I have realized that putting whole HTML code in one line would also delete unnecessary empty lines.

Not sure about the rest, for me it seems like botkit version of HTML is somewhat limited and also ignores a lot of styles and other visual changes I want it to have.

ooverandout on 24 Nov 2018

👍1

btw., if you find some interesting visualisation that work with html botkit, please share - I would also gladly use them :)

ooverandout on 24 Nov 2018

👍1

@Ooverandout Thanks a lot for your response! I will try your trick with the "html one liner". The interesting thing is that even the examples from both websites (please see my initial post) do not work properly. There is lots of (vertical) space between one html element and the other. Another thought of mine is that the formatting may be caused by "wrong" server side Jabber settings. But I really don't know a lot about Jabber. :smile:

mindactuate on 24 Nov 2018

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] on 30 Jan 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] on 31 Mar 2019

Was this page helpful?

0 / 5 - 0 ratings