Chat – whatsapp bubbles

theme-component
1

:warning: Chat is still in active development so this component is likely unstable and in beta for now. Feedback and bug reports welcome.

A B C
:information_source: Summary A whatsapp-inspired skin for chat (mobile)
:eyeglasses: Preview Theme Creator (mobile view only)
:hammer_and_wrench: Repository GitHub - chapoi/discourse-chat-bubbles: A whatsapp-inspired skin for Discourse chat (mobile)
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Instructions for preview

  1. Make sure you view this on a small screen.
  2. Don’t forget to append ?mobile_view=1 to the url to get the correct view.
  3. Login to get access to chat.

Description

A bubble message-style, applied to mobile only.

image
image824×1530 144 KB

Settings

The component comes with an embedded background shown above. This can be changed in the settings. It’s recommend to use an svg pattern. This website has some for free.

You can also choose the bubble colours and the background behind the pattern, or disable the pattern altogether.

If you leave either light or dark setting empty, the bubbles will default to secondary and tertiary-low. If you leave the background colour empty, it will default to primary-high.

image
image1500×1624 214 KB

Using a full image as background can also work, but you’ll need to make sure it’s an optimised size for the mobile viewport.

Dark Mode

image
image906×1572 136 KB

You can choose different background and bubble colours for dark mode.
To avoid having to change the background-pattern it’s using a background-blend in dark mode.

For best results, choose a light-coloured pattern which works nicely in light mode, and it should be automatically muted in dark mode (unfortunately not on all devices – see below).

Known issues

  • The timestamps for your own messages are differently placed than for other peoples messages
  • Doesn’t have a dark mode (yet)
  • dark mode acts weird on some devices
13 Likes
3

this is very nice !

one suggestion,
possible to let everyone to change their own background image ?

and the default circuit SVG is rendered differently on iphone and android dark theme
on iphone, the lines looks more bright, not as the example in the doc post… not sure why…

2 Likes
4

Can I disable background pattern totally?

I would guess that is really difficult and if it can be done it needs a plugin. But I don’t remember any plugin that gives an option to users adjust such things. It would be nice, though. But it could lead to UX nightmare too when preferences are here, there and everywhere.

An user can’t even tune toolbox of composer and that would be an important feature.

5

Yes unfortunately that’s a whole other league. If the interest is ever big enough for this skin in general, I’d love to expand on this but for now that’s not happening.

Oh yeah, that’s easy enough. Can make an update for that. :+1:

3 Likes
6

@chapoi could you try dark theme on iphone, most patterns are rendered weird there.

say, the default one, on iphone dark, the links are white, looks too busy

it looks ok on android dark theme tho…

thanks

1 Like
7

Oh wow! Thanks for that, Ill try to take a look at the dark mode over the weekend

2 Likes
8

I’ve added a setting to disable the pattern completely.

The dark-mode issues on Iphone are due to a bug in safari, which prevents the background-mode-blend property from working when the background-repeat is used… Quite annoying and I don’t have a workaround yet.

It might come down to two separate uploads for dark/light mode, which isn’t elegant at all.

Either way, I’d recommend for now to use it without the pattern, if you’re on Iphone and use your device in dark mode.

5 Likes
9

Maybe an user option to use their existing “User Card Background” image as the chat background?

3 Likes
10

Yeah same here:

IMG_0407
IMG_04071405×209 45.3 KB

But looks great on Android:

IMG_0406
IMG_04061114×175 38.8 KB

Without a pattern it looks boring. I left it enabled for now, but Apple users started complaining. :stuck_out_tongue_winking_eye:

11

Hi @chapoi is there a way to change the chat reply icon to an actual left arrow instead of the shareicon that shows up of d-icon-share?

12

Not specifically with this plugin, no.

You could follow something like this

to replace all instances of the icon. (I don’t think we use the share-icon in any other place, so this could maybe work out).

To replace it only there would involve some more complexity, I’m just not sure what.

13

Okay thanks I will attempt it, I use the Kodular Community Theme and it same icon show in topics I reply to, I wonder if this is part of the theme specifically. I’ll go ask the dev now.

1 Like
14

Thanks for this component.

I’ve made a minor adjustment to the mobile.scss on line 55 - 62

.chat-messages-scroll {
  background-color: var(--bubble-bg);
  background-image: url(check-empty($background-pattern, $enable_pattern));
  background-blend-mode: var(--bubble-bg-mode);

}
.chat-messages-container {
  padding: 0;

The previous the background was applied to the .chat-messages-container and on scroll my background would move with the messages this way it stays in the back.

I notice there was two instances of .chat-messages-container in the mobile chat which caused this replication on the background.

1 Like
15

Thank you, excellent catch of a silly oversight. Fixed.

1 Like