Babble - A Chat Plugin [ARCHIVE]

(fearlessfrog) #715

Thanks for trying and for updating the other things. Just to be clearer, the two issues are:

  • The edit textbox (the post composer?) at the bottom of the sidebar panel is always below the bottom of the browser window and inaccessible, even with the css recalc.

  • The discourse behavior of hiding the custom header when the topics list is scrolled down causes the sidebar to stay too far down from the top (as in it is correctly position with the custom header shown, but doesn’t adjust when the header is hidden).

The header we added was via the Customize/Themes/Edit CSS/HTML - Desktop / Header section, i.e. here:

I did retry with the exact CSS you used but with no luck (with a slightly different height for our header) so we might be trying to recreate it differently.

(Eric Saliba) #716

@gdpelican, wanted to report another bug… While on any iOS devices (iPad & iPhone) and viewing the Full Screen Chat, if you begin typing in the text area, the window scrolls and the text area hides behind the keyboard.

I can confirm this on even the demo babble website, so it isn’t based on any css changes on my own site also. Maybe you can fix this in the next release.

Do we expect an updated master soon with the pervious bug fixes or we see the sidebar version soon with all the changes?

(James Kiesel) #717

The sidebar version will have all the fixes I can muster; I’m nearly ready to merge it into master, and have deployed it to for some testing. Give it a spin and let me know what you think!

Recent additions /fixes:

  • We support file uploads now
  • Fix for username cards not showing up properly
  • Properly mention people with notifications
  • Editing and deleting messages works smoothly
  • The whole darn thing is a bit faster

I’ll be having a look at the date issue soon.

If you want to stick around on the full page chat, I’ve created a legacy branch for it, simply add the following to your app.yml

git clone -b full-page-chat

(Eric Saliba) #718

Great update! I only noticed two things still to fix:

  • Clicking on Username to visit their Profile page is broken on the second click, works on User Avatar now!
  • Expanded/Full Screen Chat bug while typing in text area on Mobile, the text area hides behind the keyboard.
  • I’m still seeing Invalid Date also.

Also, will we have the option to set left or right for the sidebar?

(James Kiesel) #719

I’ll fix the username thing today no worries. Have a go at some custom css on your instance for a right sidebar:

.babble-sidebar {
  left: auto;
  right: 0;

@media (min-width: 700px) { {
    margin-left: auto;
    margin-right: 300px;

I’ll consider making this an plugin option; I originally didn’t like it because the sidebar div is resizeable from the bottom right, which breaks when the column is on the right. But it’s a minor feature and I can see how people might be more accustomed to a right-oriented chat pane.

Which device are you using where the textarea hides?

EDIT: lol, turns out it doesn’t break, it’s just weird as heck, because it expands in the opposite direction as you pull, heh.

(Eric Saliba) #720

Awesome, it looks so much better on the right! I’ll most likely hide the resize icon/disable that, that is so odd! haha.

Tested on iPhone 6s and X with iOS 11. When you select the textarea while in expanded/full screen, it focuses correctly but as soon as you type the page jumps and the textarea hides under the keyboard.

(James Kiesel) #721

I’ve merged the sidebar branch into master. Please give it a try and let me know of any issues and I’ll take care of em. :slight_smile:

A reminder that if you need to stick on the full page chat for some reason, you’ll want to switch to pull the full-page-chat branch.

(Joe) #722

James, thank you very much for all the time you put into this amazing project!

This looks amazing and works like magic!

I’d like to report a tiny issue on large screens.

When using the shout box in the header and trying to add emojis on a large screen, the positioning of the emoji picker is off.

Not really anything important, just I thought I should bring your attention to it to be worked out somewhere down the line.

Thanks again for your amazing work!

(James Kiesel) #723

Looks like you’re still on the previous full-page branch; have a go at pulling the latest?

I believe the emoji picker should show up in the right spot, but I wonder if I need to put an outer breakpoint for very large screens in for the sidebar.

(Joe) #724

Just updated to the latest main. I love the sidebar!

back to the emoji selector.

If I put the sidebar on the left. The box appears in the correct position.

If I put the sidebar or the right, the issue persists.

I prefer the sidebar on the right, so I also added a few CSS lines to bring the emoji selector to where the sidebar is.

.babble-emoji-picker.emoji-picker {
  left: unset;
  right: 0

This gives me this result:

which I like very much.

Amazing work! Thank you!

(Vincent) #725

Thanks for the great work!

I still have this bug in Safari (macOS and iOS). The coffee cup icon is Babble:

The search icons gets back to its rightful color after being hovered, or if anything has been clicked on the page.

Another: when I open Babble, the chatbox is not scrolled to the bottom.


Any clue?

(Stephen Chung) #726

Two minor issues:

  1. With sidebar on the right, and official Materials Design theme, since the theme puts the “New Topic” button all the way to the lower-right corner, it covers up the input textbox… Not sure what can be done about this…


  1. In Settings, the Chats option is put inside a <span> that makes it unstyled. Removing the extra <span> will cause it to style correctly.


there is also the issue with the sidebar, that when toggled on wide screens the main container gets pulled towards the sidebar and isn’t vertical inline with the header anymore.

other than that i like the way this plugin is heading!

(Joe) #728

Had the same issue @bangarang .

This occurs because a left / right - depending on sidebar location - margin is added when the chat is sidebar is open.

I assume the goal is to push the content to the side so that it is not covered by the cat sidebar.

The problem with doing it this way is that it causes the misalignment you mentioned because the left / right margins are not automatically calculated.

My work around is this:

For right siderbar

@media (min-width: 700px){ {
    margin: 0 auto !important;

For left siderbar

@media (min-width: 700px){ {
    margin: 0 auto !important;

But this will result in the chat being on top of content if there isn’t enough space. I personally don’t mind that.

This workaround won’t work for everyone. My main content is centered.

Regardless, the lines you need to look at are either:

@media (min-width: 700px){ {
    margin-left: 300px;


@media (min-width: 700px){ {
    margin-right: 300px;


Just installed it on our site and it works great, thank you! Is there any way to implement new messages notifications on mobile or would that require app permissions?



New changes are just awesome, thanks for your work!
There’s just one thing, when using dark theme, background of the chat stays white. Is there any way to fix it?


How did change chat background to dark one? Thanks!

(James Kiesel) #732

Hi Pawel,

I’ll put it on my list to normalize the chat colors with the current theme; should be easy to do.

In the meantime, there’s probably some really simple css tweaks you can do to get it going with a dark theme. I’d start with this:

.babble-sidebar {
  background: inherit;

(Al Romano) #733

Hey @Pawel_Kosiorek,

Here are the changes I made to make the side-panel more Dark-Theme friendly.

Note that for the site I’m using the Material Theme - Dark Profile, and this fits nicely with that.

.babble-sidebar {
    background: inherit;

.babble-post:hover, .babble-available-topic:hover, .babble-post-container .babble-post-actions {
    background-color: #111;

.babble-post-container .babble-post-actions i.fa {
    color: #ff0606; /* Red Icons */
.babble-load-message {
    background: #222;

To override the panel, you can place this under:
Admin > Customize > Themes > Edit CSS/HTML > Common > CSS


You guys are the best! Thanks! Now it doesn’t melting my eyes during the night :wink:
BTW is it would be great to add some thin border line to separate chat from rest of the page, but that’s a minor thing, thanks a lot!

Oh damn… Ok, I found a bug. After expanding you can see forum in the background:

Ok, so I can leave with that bug on standard page but on mobile it started to be unusable :neutral_face: