# Chat Sidebar

**URL:** https://meta.discourse.org/t/chat-sidebar/298829
**Category:** Theme component
**Tags:** chat
**Created:** [March 11, 2024, 6:23am UTC](https://meta.discourse.org/t/chat-sidebar/298829 "2024-03-11T06:23:18Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 11, 2024, 6:23am UTC](https://meta.discourse.org/t/chat-sidebar/298829/1 "2024-03-11T06:23:19Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **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 · GitHub](https://github.com/Arkshine/discourse-chat-sidebar) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

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! 😄

## 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](https://meta.discourse.org/t/why-you-should-use-discourse-internally-for-your-company-team-instead-of-slack-4-years-use-case/296983). 

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.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [March 11, 2024, 12:24pm UTC](https://meta.discourse.org/t/chat-sidebar/298829/2 "2024-03-11T12:24:59Z")

</div>

Nicely done! 👏 🙂

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [March 11, 2024, 12:26pm UTC](https://meta.discourse.org/t/chat-sidebar/298829/3 "2024-03-11T12:26:44Z")

</div>

Does this support [Discourse Bars 🍻 🍸 (a sidebar framework)](https://meta.discourse.org/t/discourse-bars-a-sidebar-framework/298216) , because it would be nice to combine it with other sidebar widgets?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 11, 2024, 2:08pm UTC](https://meta.discourse.org/t/chat-sidebar/298829/4 "2024-03-11T14:08:24Z")

</div>

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.
> 
> ![image](https://global.discourse-cdn.com/meta/original/4X/6/b/c/6bc095bb3d8a910b9ded2ee923624ea35b07cfe9.png)

---

<div class="post-metadata">

### Author: ![WorldIsMine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/worldismine/32/455660_2.png) [@WorldIsMine](https://meta.discourse.org/u/WorldIsMine)
#### Post date: [March 11, 2024, 4:41pm UTC](https://meta.discourse.org/t/chat-sidebar/298829/5 "2024-03-11T16:41:47Z")

</div>

OMG this is great!

---

<div class="post-metadata">

### Author: ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [June 2, 2024, 4:03pm UTC](https://meta.discourse.org/t/chat-sidebar/298829/6 "2024-06-02T16:03:31Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [June 2, 2024, 5:41pm UTC](https://meta.discourse.org/t/chat-sidebar/298829/7 "2024-06-02T17:41:41Z")

</div>

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. 🤔

---

<div class="post-metadata">

### Author: ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [June 2, 2024, 10:16pm UTC](https://meta.discourse.org/t/chat-sidebar/298829/8 "2024-06-02T22:16:22Z")

</div>

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

---

<div class="post-metadata">

### Author: ![DevTeVe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/devteve/32/487601_2.png) [@DevTeVe](https://meta.discourse.org/u/DevTeVe)
#### Post date: [October 27, 2025, 4:59pm UTC](https://meta.discourse.org/t/chat-sidebar/298829/9 "2025-10-27T16:59:43Z")

</div>

~~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

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [October 27, 2025, 5:01pm UTC](https://meta.discourse.org/t/chat-sidebar/298829/10 "2025-10-27T17:01:06Z")

</div>

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

---

<div class="post-metadata">

### Author: ![gilles](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gilles/32/549022_2.png) [@gilles](https://meta.discourse.org/u/gilles)
#### Post date: [October 27, 2025, 6:30pm UTC](https://meta.discourse.org/t/chat-sidebar/298829/11 "2025-10-27T18:30:03Z")

</div>

super component 👍 it’s a very good idea

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [October 28, 2025, 2:07pm UTC](https://meta.discourse.org/t/chat-sidebar/298829/12 "2025-10-28T14:07:38Z")

</div>

I made a PR to fix the known deprecations. 👍

[https://github.com/Arkshine/discourse-chat-sidebar/pull/2](https://github.com/Arkshine/discourse-chat-sidebar/pull/2)

Thanks to @DevTeVe for testing it!

---

<div class="post-metadata">

### Author: ![DevTeVe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/devteve/32/487601_2.png) [@DevTeVe](https://meta.discourse.org/u/DevTeVe)
#### Post date: [October 28, 2025, 2:08pm UTC](https://meta.discourse.org/t/chat-sidebar/298829/13 "2025-10-28T14:08:48Z")

</div>

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

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.”

---

<div class="post-metadata">

### Author: ![patrickemin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickemin/32/520162_2.png) [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [December 11, 2025, 1:52am UTC](https://meta.discourse.org/t/chat-sidebar/298829/14 "2025-12-11T01:52:02Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![patrickemin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickemin/32/520162_2.png) [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [December 11, 2025, 3:22pm UTC](https://meta.discourse.org/t/chat-sidebar/298829/15 "2025-12-11T15:22:58Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![patrickemin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickemin/32/520162_2.png) [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [March 27, 2026, 8:05pm UTC](https://meta.discourse.org/t/chat-sidebar/298829/16 "2026-03-27T20:05:04Z")

</div>

Hi, the chat sidebar still works for me but I have this alert as a red banner:

[Getting rid of the big red banner, how?](https://meta.discourse.org/t/getting-rid-of-the-big-red-banner-how/399461)

I have this in the console:

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/8/a/a8a2ec0948faf97ba17f48a5feed03b4daba03a0.png)

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 27, 2026, 8:15pm UTC](https://meta.discourse.org/t/chat-sidebar/298829/17 "2026-03-27T20:15:12Z")

</div>

I’ve pushed a fix. Give it a try and let me know! 👍

---

<div class="post-metadata">

### Author: ![patrickemin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickemin/32/520162_2.png) [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [March 27, 2026, 8:17pm UTC](https://meta.discourse.org/t/chat-sidebar/298829/18 "2026-03-27T20:17:00Z")

</div>

Great, the banner went away, thanks.
