Babble - A Chat Plugin

(Steve) #776

If you do, then maybe automate the first message? If it’s not user-generated then there should be no reason to flag it!

(James Kiesel) #777

On second thought, this isn’t the right fix (thanks, test suite!)

It should, in theory, be perfectly valid to do something like

plugin.add_to_serializer(:basic_topic, :babble_is_cool) { true }

And not have it worry about whether a basic topic responds to babble_is_cool or not.

Anyway, I’ve pushed a workaround to Babble latest, but maintain that this is a legit bug in the data explorer.

(Makary ) #778

Wouldn’t it be better to create Babble topic at the time when chat is created via DISCOURSE//admin/chats/new, and users would only post replies? Well, it seems pretty straightforward to me (but mind that I’m not a programmer), and would solve this:

Second thing, there is tiny issue with displaying Babble under Material Design Stock Theme - it places the New Topic at the lower right corner, and it floats over chat window disrupting it slightly. See screenshot:
image(The golden-ish circle is the ‘New Topic’ button, and below is Babble’s input area)

Finally, I wanted to share my CSS snipet for making the ‘unread’ state of chat icon more apparent, created in collaboration with @Pawel_Kosiorek for his awesome community :slight_smile:

How does it look like?


What does it do?
  • it uses theme color vars instead of hard-coded values, which makes it in theory compatible with any theme;
  • it resembles the ‘Private Message’ badge, so users should know that it indicates that something happened that requires their attention, and how they should react to it;
  • it stands out pretty fine, yet is consistent with the resto of the UI.
The code.
    background: rgba(238, 238, 238, 0.5);
        opacity: unset;
        color: $tertiary;
        font-family: 'FontAwesome';
        border-radius: 11px;
        color: #fff;
        padding: 4px;
        line-height: 1;
        vertical-align: middle;
        text-align: center;
        font-size: 11px;
        position: absolute;
        z-index: 1;
        left: 0;
        top: -9px;
        min-width: 6px;
        left: auto;
        right: 25px;

Hope someone benefits from it :slight_smile:

(Clay Heaton) #779

I’ve just started following Babble… At work we use Slack and Discourse, but are thinking of nuking Slack and moving everything to Discourse. Our project managers are curious whether Babble can help ease the transition.

I can’t really tell from reading recent posts – is Babble now integrated with Discourse core? Or does it still need to be installed as a plugin?

(Joshua Rosenfeld) #780

Babble is a plugin - you’ll need to install it using these instructions.

(Stephen Chung) #781

From my own person observation, Babble cannot replace Slack yet. It is still quite crude. It works but not very well.

Other people may have diff opinions tho.

(Fajfi) #782

Has anyone had a problem with the emoji window? On my site it appears under chat…

On PC it looks normally but on mobile version I have this problem ;(

(James Kiesel) #783

Hi Fajfi, sorry for the delayed reply here. I’ll grab this first thing in the new year :slight_smile:

(James Kiesel) #784

@Fajfi Thanks for the report; this is fixed in the latest master.

(Sam Aaron) #785

@gdpelican, I just installed it on my discourse (v1.9.0.beta17 +108) and whilst everything looks good, when I post a message, the window blocks - seemingly waiting for a notification to say that the message has been inserted into the log:

The only way to move on is to refresh the page - after which the message is there as expected, but the next message also blocks.

Perhaps I’m doing something wrong?

(James Kiesel) #786

Can you reproduce on

(Sam Aaron) #787

@gdpelican - seems to work just fine there, how odd.

Are you aware of anything I could do to help get more information about why it’s not working for me? For example, I tested on both Safari and Chrome locally (on macOS) and saw the same freezing behaviour.

(James Kiesel) #788

Let me try updating to the latest bleeding edge DIscourse to see if it’s a very recent change causing it. Do you have any other plugins or custom css / javascript running on your instance?

(Sam Aaron) #789

I’m just using the patreon plugin and no custom js/css that I’m aware of (is there a way of checking?).

BTW, thanks so much for helping out with this :slight_smile:

(Sam Aaron) #790

@gdpelican - apologies, I just remembered I did add a small amount of custom js to add a “copy code” button to the top of code snippets. The content of my </head> is as follows:

<!-- CSS for clipboard -->
<style type="text/css">
    .bd-clipboard {
        display: none;
        float: right;
        height: .5rem;
        position: relative;
        white-space: nowrap;
    .bd-clipboard + pre {
        clear: both;
        margin-top: 0;

    @media (min-width: 768px) {
        .bd-clipboard {
            display: block;

    .btn-clipboard {
        background-color: transparent;
        border-radius: .25rem;
        color: #818a91;
        cursor: pointer;
        display: block;
        font-size: 75%;
        padding: .25rem .5rem;
        position: absolute;
        top: .125rem;
        right: .125rem;
        z-index: 10;
    .btn-clipboard:hover {
        background-color: #027de7;
        color: #ffffff;
    .code-highlight {
        /*background-color: ;*/
        margin-bottom: 1rem;
        padding-bottom: .5rem;
    .code-highlight pre {
        margin: 0;

<!-- JavaScript for clipboard -->
<script src=""></script>
<script type="text/discourse-plugin" version="0.8">
        $elem => $('pre', $elem).each(function () {
            // add copy button to code block
            $(this).wrap('<div class="code-highlight"></div>').before('<div class="bd-clipboard"><span class="btn-clipboard">Copy Code</span></div>')
            // initialise clipboard
            var clipboard = new Clipboard('.btn-clipboard', {
                target: function (trigger) {
                    return trigger.parentNode.nextElementSibling
            // update text of the copy button
            clipboard.on('error', function (e) {
                var modifierKey = /Mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
                var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
            clipboard.on('success', function (e) {

    // revert back text of the copy button
    $(document).on('mouseleave', '.btn-clipboard', function () {
        $(this).text('Copy Code')

(Sam Aaron) #791

I just removed the js addition mentioned above, and it didn’t fix the freezing issue in the babble chat window :frowning:


I’ve got the same “freezing” problem here…
Last update basically made babble unusable :confused:
After every enter you’re waiting forever till post will show up. And nothing is happening. Only whole site refresh i helpful.

It happens after update to latest discourse version.
Is there’s any way to roll back to previous branch?

Ok, I’ve get back to full-page-chat branch

- git clone -b full-page-chat

But still the same problem. After you send post there’s a circle icon on the right keep turning around. And post is not visible till whole site refresh.


(Parisa) #793

The speed of typing chat with my cellphone is really slow. Is it only my problem?

(James Kiesel) #794

I’m away from internet connectivity this week, but will take a look when I come back. Thanks for the reports; it seems there’s been a Discourse update very recently which broke it. An error message from /logs would be very helpful.


I’ll try to dig into logs