Chat Sidebar

Theme component
1
:information_source: Summary Opens automatically and displays the chat like a sidebar, as long as space exists, and takes advantage of the height
:hammer_and_wrench: Repository GitHub - Arkshine/discourse-chat-sidebar
: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

Credits: @Alon1 (paid request)[1]

This theme component aims to open automatically and display the chat like a sidebar, as long as space exists, and take advantage of the height.

  • Only for desktop
  • Windows resize support
  • Composer support
  • Can stick either to the content or window on both sides
  • User can choose the position (saved in the browser’s local storage)
  • Can revert to the original chat state if it was previously opened
  • The chat original user’s preferences are untouched
  • Partial theme support (most of the popular ones)

This should work on most of the themes.
Let me know if it misses options or something doesn’t work on a theme! :smile:

Settings

Name Default Description
breakpoint auto Breakpoint in px for the chat sidebar to appear.
Set to auto to use the default sidebar and content width as a natural breakpoint (recommended).
width 400px Width of the chat sidebar.
position [2] right Position of the chat sidebar.

left: Stick to the left side of the content
right: Stick to the right side of the content
outside-left: Stick to the left side of the window
outside-right: Stick to the right side of the window
theme_style When possible, use the current theme style on these chat sidebar position.
Available only for most of the popular themes.
This is not a reliable setting (theme name can be changed).
Disable to use the default theme style.
allow_user_preference[3] Allow users to set their chat sidebar preferences.
Note: this is saved in the user’s browser local storage.

Available values:
position: Allow users to set the chat sidebar position

Todo

  • Tests
  • Smoother transitions
  • More user’s preferences?

Dev Notes

Initially, I tried to insert the <ChatDrawer /> component into another outlet so it would be easier to manipulate and keep it in the flow. Unfortunately, the original component can’t be suppressed entirely (I’m thinking of the events). At least, I could not find a way to overwrite it.

It leaves me no choice but to follow the hard JS way at the cost of a little more CPU intensive but less intrusive (though manual resizing only happens sometimes).

  1. If interested, Alon’s use case here. ↩︎

  2. Make sure you refresh the page. ↩︎

  3. Important: this setting uses the latest API to show the icon in the header and requires the latest Discourse version. ↩︎

19 Likes
2

Nicely done! :clap: :slight_smile:

3

Does this support Discourse Bars 🍻 🍸 (a sidebar framework) , because it would be nice to combine it with other sidebar widgets?

7 Likes
4

Unfortunately, it can’t support Discourse Bars at the moment.

The component uses the original chat drawer, and the positioning is done manually.
Unless we can use/move the original <ChatDrawer /> component where we want, that would be difficult, I believe. I agree, though; that would be great! :slight_smile:

At least it can be displayed alongside the Bar's sidebar

My component uses #main-outlet-wrapper element as a reference, so anything inside will work fine.

image
image1997×897 88.9 KB

3 Likes
5

OMG this is great!

3 Likes
6

Does this only work if the sidepanel is collapsed ? I notice if i don’t collapse my sidepanel the chat sidebar doesn’t show.

1 Like
7

In this current version, it doesn’t force the main content to shrink, if there is not enough spaces to place the chat sidebar. It’s by design.

Maybe there are situations this can be useful. I don’t mind adding a user’s option to allow this. :thinking:

1 Like
8

Okay I understand, thanks for the component it does work pretty neat.

1 Like