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 https://github.com/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 (sponsored 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.

  • 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. ↩︎

25 Likes
2024: The Year in Review
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

4 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
9

I believe this component is no longer working as of `3.6.0.beta2-latest` ? doesn’t matter what I pick it’s always on the right like the stock experience… Is it working for anyone out there?

This component is indeed working as expected now!, I was mostly all the time testing on my macbook user screen and when the component doesn’t have enough space it just doesn’t show up anything which is probably why i got confused. This is working perfectly now

2 Likes
10

I did not test yet, but thanks for reporting, I will checkout soon!

2 Likes
11

super component :+1: it’s a very good idea

12

I made a PR to fix the known deprecations. :+1:

Thanks to @DevTeVe for testing it!

4 Likes
13

Thank you very much for going above and beyond to help me :heart: !

So, I was talking offline with @Arkshine, and since I had a few suggestions, we decided this was a better place to leave them!

  1. Resizable chat window (width and height)
  2. Allow it to be still floating even if it covers the text on the screen.
  3. It would be great if width was also auto; that way, it would always find a way to fit, even if it looks small, and in the settings (not default), we’d have something like “min px” and a warning that says, “If set, the chat will revert to stock if not at least xxx value.”
2 Likes
14

HI, since it’s now possible to star our favorites chat and DM channels, is there a way to have the “Starred” list of chat and DM channels displayed by default in that Chat Side bar? Thanks.

Update: I mean if nothing is starred, don’t change anything, otherwise, display the starred channels?

1 Like
15

Hi, I noticed this morning that starred channels do not appear anymore in the general list, only in the Starred section in the sidebar. Thus the importance of having this starred list visible by default.