Full-screen chat as default for collaboration setup

Feature
1

I’m working on a targeted collaboration setup that positions Chat as the primary space for member communication, similar to other collaboration platforms. The goal is for members to land directly in their channels or latest threads, making chat the central hub when they visit the site.

So rather than landing on a view like this:

The image displays a screenshot of a Slack interface with various channels and topics, such as 'Welcome to Vela 203', 'MANUEL KOSTK', and 'DEV: Declare colors for all tag styles', with some discussion posts visible in the 'General' channel. (Captioned by AI)
The image displays a screenshot of a Slack interface with various channels and topics, such as 'Welcome to Vela 203', 'MANUEL KOSTK', and 'DEV: Declare colors for all tag styles', with some discussion posts visible in the 'General' channel. (Captioned by AI)1712×1236 213 KB

I’d land right on chat full-screen:

The image shows a chat interface from the application Vela, detailing a thread with messages about logo exploration, a final build notification, excitement over pushing content, and a request for a sanity check, shared on June 2023. (Captioned by AI)
The image shows a chat interface from the application Vela, detailing a thread with messages about logo exploration, a final build notification, excitement over pushing content, and a request for a sanity check, shared on June 2023. (Captioned by AI)1712×1236 133 KB

It seems there’s currently no way to have chat open in full-screen mode by default. Could this be added as an option?

It could be exposed as a site setting, a theme modifier, or a value transformer. A way to give theme authors or site admins the flexibility to integrate Chat as the default interaction view.

4 Likes
2

You can write an initializer like this:

export default {
  name: "default-full-page-chat",

  initialize() {
    if (!window.localStorage.getItem("discourse_chat_preferred_mode")) {
      window.localStorage.setItem("discourse_chat_preferred_mode", '\"FULL_PAGE_CHAT\"');
    }
  },
};

That should do what you want I think.

8 Likes
3

Indeed, works like a charm! Thank you :blush:

7 Likes
4

I know it’s already solved, but instead of accessing localstorage directly like this, if you are able to access the plugin services from a theme, you can do:

export default {
  name: "default-full-page-chat",

  initialize(container) {
    const chat = container.lookup("service:chat");
    if (!chat.userCanChat) {
      return;
    }

    const chatStateManager = container.lookup("service:chat-state-manager");
    chatStateManager.prefersFullPage();
  },
};

Which calls this:

This would be more reliable long term, if it works (I haven’t tested this :sweat_smile: ).

5 Likes
5

Yes using service is nicer, but I don’t think we have any way to check if any preference has been set through the service atm. Do we?

And if understood the request here, we don’t want to override any decision of the user, we just want to promote full screen on first load, if we just want to force it yes your solution will work.

4 Likes
6

We have these, but isDrawerPreferred is always true if no preference has been set:

I think it would be nice if we had a hasNoPreferredMode getter for this situation that just checks the store, here is a PR:

4 Likes
7

Okay @nolo this PR is merged now, so you can use the plugin API I described in Full-screen chat as default for collaboration setup - #4 by martin and hasNoPreferredMode from the chat state manager.

2 Likes
8

Hi @nolo, just a quick note:

In fullscreen chat mode, you typically need to exit fullscreen (or otherwise change the chat UI) before you see a clear option to go back to the list of chats or switch to a conversation with another member.

Might be worth considering if there’s a way to improve that navigation experience within fullscreen itself.

9

Thank you @martin, this works great!

Testing the UX in my current case, it actually feels more intuitive to have Chat full-screen all the time. I want Chat to be the primary mode of communication, and allowing it to be minimized users can end up on a screen they didn’t intentionally choose before, which can be confusing.

I’m thinking of just using CSS to hide the minimize option, unless there’s a more direct way to disable it?

image
image300×172 1.86 KB

@jahan_gagan I’m not quite sure what you were referring to, is this on sites that use a hamburger menu for navigation? In my setup, all navigation options are available via the sidebar.

One issue I’ve run into though: on tablets the keyboard automatically pops up when navigating to a chat channel and it causes a very jumpy layout. I haven’t looked into addressing that, just noting it as a complication.

3 Likes
10

Yes hiding the collapse button would work, but I just checked and there is one more way users may switch back to drawer mode. If you press the - key when you are in the forum, we open the chat drawer:

And in this function we call chatStateManager.prefersDrawer(), which sets the local storage preference. We have had some more discussions lately internally about allowing a chat-only mode of Discourse, including an experiment in this direction, as well as ideas around drawer mode.

Not sure when the time will come for us to focus on this more, @mcwumbly may have some input here or @lindsey .

2 Likes
11

Thanks, that’s really helpful to know! Not sure yet what I’ll do right now, but yes, would be great if there will be a future option to fully align this with common Discourse settings.

1 Like