Chat Sidebar

[Arkshine]

	Summary	Opens automatically and displays the chat like a sidebar, as long as space exists, and takes advantage of the height
	Repository	GitHub - Arkshine/discourse-chat-sidebar
	Install Guide	How to install a theme or theme component
	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!

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

[Lilly]

Nicely done!

[merefield (Robert)]

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

[Arkshine]

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!

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.

[WorldIsMine (DaveK)]

OMG this is great!