Babble Chat

I want the full wishlist. :wink:

How can I make the line between messages from that black to a very light gray? Or better yet how can i add a very light gray line between every message sent?

@gdpelican why does this happen everytime me or someone enters a message? It’s extremely painful!

Hm, I’ve noticed that myself for the first few messages of a chat, but haven’t been able to repro just yet. It should go away either on refresh or after the first couple messages of a chat have been entered… and I’ll have some time tomorrow to put a proper fix in. Thanks for the report.

For css customization, you want to have a look at <yoursite>/admin/customize/themes, and add custom styles to the elements in the chat. For example, this might get you started on a grey line between each message:

.babble-post-container {
  border-bottom: 1px solid lightgrey;
  padding-bottom: 8px;
1 Like

@gdpelican Yeah that worked, also i tried customizing the rest of the css and made some nice changes. However i cant seem to shrink or remove this extra space between the composer and messages.

Also another bug, on the top there’s a little crack where the outer website seeps through the fullscreen chat.

I appreciate the load messages bug you’re fixing tomorrow

Alright, there should be a fix for messages not being loaded bug at the beginning of a chat lifetime.

1 Like

Hey team, I’ve just released the PM branch for beta testing. This is a pretty significant update (it’ll be a major version bump once it goes into master), so I’d love some folks to try it out if you’re willing. What’s new:

  • Direct messaging: You can now have a one-to-one babble chat with anyone you could send a private message to.

  • More intuitive and customizable chat handle: The babble widget is now much more customizable through css, and indicates when you have unread content and mentions

  • Better unread indication: Always know when you have stuff to read, and where. Channels are marked with whether they are read or not, and indicate if there are direct messages or @mentions

  • Who’s online integration: If you have this plugin installed alongside the Who’s online plugin, it will highlight who is online in the direct messages section, as well as avatars within the chat itself.

It’s currently live on, or you can install it yourself by referencing the pms branch of the Babble repo:

# app.yml
- git clone -b pms

Eager to hear your feedback; let me know how you get on.


After install pms, upon loading index page. I can’t find babble icon to open chat window at all. I wonder where can I set that? The plugin is enabled.

Also, this also bug I believe. when i add catagories. That popup avoid me to save.

** I can’t do any now. I can’t add channle both category and group. I dont know how to reset database of Babble. I tried rebuild but the problem still occur. Please help. **

Babble won’t appear unless you have a chat channel for a group or channel created. I’ll put in a fix to allow it to appear if the PM feature is turned on (It’s marked ‘Enable one-to-one chat with Babble’ in the plugin settings, and defaults to off)

Did you have Babble installed on this instance previously, or is it a fresh install? Would you mind posting or PMing me the result of running the following commands from your droplet?

# enter your rails console
/var/discourse/launcher enter app
rails c
# then, the results of the following two commands:
pp Topic.babble; nil
pp Category.all; nil
1 Like

Ah, actually, I see the cause of this now. Thanks for the report, I’ll have it patched up shortly.

EDIT: I believe the cause of this is now fixed; let me know if you encounter further trouble?

1 Like

On some iPhones the addition of the bullhorn icon is causing a wrap that obscures the category / view selection bar.

Is this an issue or am I holding it wrong?


What theme are you using? I like the badge color of Ride Event and Staff Discussion. How do you do that?

[Bug Report] [Database issue]

Babble create unknown number group below with a lot of text char as second picture shown.

This alter main discourse group database. Careful I am very scare right now hehe.

Ah, great, thanks for reporting that.

Babble creates groups for direct messages in the backend, as this is the easiest way to allow only certain people (namely the 2 people involved in the direct message) to view the chat.

I’ve fixed the /groups route and the groups appearing under the New Category model in the latest, so you shouldn’t see those strange groups anymore…

Just out of curiosity, what happens when you have a few users on and type <script>alert('h4x0r');</script> into the chat window?

It looks like Babble supported screen sizes down to 324px, whereas there are still some HTC and iPhone 4/5 dinosaurs out there with a screen width of 320px. These are are the kinds of things that make devs like me sad.

In any case, I’ve fixed the header display for very small screens, so we should be able to support down to the industry standard of 320px now.

1 Like

We use the same rendering / cleansing code for chat posts as Discourse does in rendering regular posts in a topic, so the answer is ‘nothing bad’. Here’s the chat result for that input on the test site:


1 Like

Thanks. I haven’t looked at their XSS sanitization filters but a result of undefined indicates some JS executed, which is unexpected.

My understanding is that Discourse ‘cooks’ its posts, a process in which they create a one-off JS runtime serverside when the post is created, in which they run some js code (stuff like ‘replace :heart: with a heart emoji’, remove unwanted tags like <script> and <img onload='console.log('hi!') />, etc.)

This js is executed only once, on the server, in the aforementioned one-off js runtime, after which the resulting html is stored in a separate column in the database as sanitized text, which is then served to the clients on subsequent page loads. I haven’t been able to replicate a valid XSS attack using Babble for several years now, although if you’re able to get a console log or alert or whatnot to appear on, please PM me the exact text you entered in order to accomplish it and I’ll fix it immediately. :slight_smile:

1 Like

Thanks for the 411. Super useful. I haven’t actually succeeded on performing a reflection attack but if I did I wouldn’t tell anyone here. :wink: And thanks for the plug-in!