Commit Graph

24 Commits

Author SHA1 Message Date
David Battersby
47540fb4e0
FEATURE: chat drawer navigation improvement (#27419)
This change replaces the chat drawer tabs with new drawer routes for channels, direct messages and threads.

The main objective is to improve navigation within drawer, now that we have separation of chat sections in drawer.
2024-06-13 13:17:12 +04:00
David Battersby
891fb17f60
FEATURE: load chat channel settings within drawer (#27346)
This change allows chat drawer users to edit channel settings and members without leaving drawer mode. If a channel is open within chat drawer and the user clicks the Channel name, it will load channel settings within the drawer.
2024-06-06 14:01:09 +04:00
Joffrey JAFFEUX
bbb8595107
PERF: defer loading channels (#26155)
Prior to this change we would pre-load all the user channels which making initial page load slower. This change will make them be loaded right after initial load. In the past this was not possible as the channels would have to be loaded on each page transition. However since about a year, we made the channels to be cached on the frontend and no other request will be needed.

I have decided for now to not show a loading state in the sidebar as I think it would be noise, but we can reconsider this later.

Note given we don't have the channels loaded at first certain things where harder to accomplish. The biggest UX change of this commit is that we removed all the complex logic of computing the best channel to display when you load /chat. We will now store the id of the last channel you visited and will use this id to decide which channel to show.
2024-03-18 08:35:07 +01:00
David Battersby
1d4ef460ac
UX: chat channel title links to channel settings (#25785) 2024-02-21 17:53:04 +08:00
Alan Guo Xiang Tan
55df52b56d
DEV: Skip consitently flaky tests on CI (#25689)
Why this change?

The tests are consistently flaky and failing with the following error:

```
CapybaraTimeoutExtension::CapybaraTimedOut:
  This spec passed, but capybara waited for the full wait duration (10s) at least once. This will slow down the test suite. Beware of negating the result of selenium's RSpec matchers.
```
2024-02-15 14:14:53 +08:00
Joffrey JAFFEUX
06bbed69f9
DEV: allows a context when creating a message (#25647)
The service `Chat::CreateMessage` will now accept `context_post_ids` and `context_topic_id` as params. These values represent the topic which might be visible when sending a message (for now, this is only possible when using the drawer).

The `DiscourseEvent` `chat_message_created` will now have the following signature:

```ruby
on(:chat_message_created) do | message, channel, user, meta|
  p meta[:context][:post_ids]
end
```
2024-02-13 11:37:15 +01:00
Joffrey JAFFEUX
53b96638c5
DEV: implements <Chat::Navbar /> (#24917)
This new navbar component is used for every navbar in chat, full page or drawer, and any screen.

This commit also uses this opportunity to correctly decouple drawer-routes from full page routes. This will avoid having this kind of properties in components: `@includeHeader={{false}}`. The header is now defined in the parent template using a navbar. Each route has now its own template wrapped in a div of the name of the route, eg: `<div class="c-routes-threads">..</div>`.

The navbar API:

```gjs
<Navbar as |navbar|>
 <navbar.BackButton />
 <navbar.Title @title="Foo" />
 <navbar.ChannelTitle @channel={{@channel}} />
 <navbar.Actions as |action|>
   <action.CloseThreadButton />
 </navbar.Actions>
</navbar>
```

The full list of components is listed in `plugins/chat/assets/javascripts/discourse/components/navbar/index.gjs` and `plugins/chat/assets/javascripts/discourse/components/navbar/actions.gjs`.

Visually the header is not changing much, only in drawer mode the background has been removed.

This commit also introduces a `<List />` component to facilitate rendering lists in chat plugin.
2023-12-18 17:49:58 +01:00
Joffrey JAFFEUX
ab832cc865
FEATURE: introduces group channels (#24288)
Group channels will allow users to create channels with a name and invite people. It's possible to add people even after creation of the channel. Removing users is not yet possible but will be added in the near future.

Technically a group channel is `direct_message_channel` with a group attribute set to true on its direct message (chatable). This model might evolve in the future but offers much flexibility for now without having to rely on a complex migration.

The commit essentially consists of:
- a migration to set existing direct message channels with more than 2 users to a group
- a new message creator which allows to search, add members, and create groups
- a new `AddUsersToChannel` service
- a modified `SearchChatable` service
2023-11-10 11:29:28 +01:00
Joffrey JAFFEUX
90efdd7f9d
PERF: cook message in background (#24227)
This commit starts from a simple observation: cooking messages on the hot path can be slow. Especially with a lot of mentions.

To move cooking from the hot path, this commit has made the following changes:

- updating cooked, inserting mentions and notifying user of new mentions has been moved inside the `process_message` job. It happens right after the `Chat::MessageProcessor` run, which is where the cooking happens.
- the similar existing code in `rebake!` has also been moved to rely on the `process_message`job only
- refactored `create_mentions` and `update_mentions` into one single `upsert_mentions` which can be called invariably
- allows services to decide if their job is ran inline or later. It avoids to need to know you have to use `Jobs.run_immediately!` in this case, in tests it will be inline per default
- made various frontend changes to make the chat-channel component lifecycle clearer. we had to handle `did-update @channel` which was super awkward and creating bugs with listeners which the changes of the PR made clear in failing specs
- adds a new `-processed` (and `-not-processed`) class on the chat message, this is made to have a good lifecyle hook in system specs
2023-11-06 15:45:30 +01:00
Joffrey JAFFEUX
42801c950f
UI: redesigned settings/members (#23804)
This PR is a first step towards private groups. It redesigns settings/members area of a channel and also drops the "about" page which is now mixed into settings.

This commit is also:
- introducing chat-form, a small DSL to create forms, ideally I would want something in core for this
- introducing a DToggleSwitch page object component to simplify testing toggles
- migrating various components to gjs
2023-10-09 14:11:16 +02:00
Joffrey JAFFEUX
3bb2f3a604
FIX: correctly recognizes URL with subfolder (#23173)
Prior to this fix minimizing a full page chat on a subfolder install would cause the drawer to not show.
2023-08-21 22:12:05 +02:00
Joffrey JAFFEUX
478c4b1a74
DEV: prevents message actions to hide drawer's header (#22448)
In specific conditions (generally a small drawer, with a long message) it is possible to have the message’s actions menu to be displayed hover the drawer's header.

This is particularly hard to fix correctly using popper due to our positioning which is slightly at the limit of the container.

The proposed fix targets mostly the specs by ensuring the messages actions will be hidden before attempting to click any header's button.
2023-07-06 07:33:39 +08:00
Alan Guo Xiang Tan
41f8bff2c3
DEV: Remove superfluous js: true metadata (#21960)
Why this change?

It is very unlikely that we need to ever JS for system tests considering
that we rely on a JS framework on the frontend.
2023-06-07 09:26:58 +08:00
Joffrey JAFFEUX
d1f785e7de
UX: closes drawer on esc if input is not focused (#21772)
The current behavior is to close drawer when pressing escape inside the input.

After this change, first escape will blur the input, and second escape will close the drawer.

This commit also refactors the whole shortcuts for drawer system spec.
2023-05-26 18:48:45 +02:00
Joffrey JAFFEUX
22521d3428
DEV: converts models to native classes (#21418)
- `ChatChannel`
- `UserChatChannelMembership`

Also creates a new `chat-direct-message` model used as the object for the`chatable` property of the `ChatChannel` when the `ChatChannel` is a direct message channel. When the chatable is a category a real `Category` object will now be returned.

Archive state of a `ChatChannel` is now hold in a `ChatChannelArchive` object.
2023-05-08 18:24:41 +02:00
Joffrey JAFFEUX
bf886662df
UX: improves composer and thread panel (#21210)
This pull request is a full overhaul of the chat-composer and contains various improvements to the thread panel. They have been grouped in the same PR as lots of improvements/fixes to the thread panel needed an improved composer. This is meant as a first step.

### New features included in this PR

- A resizable side panel
- A clear dropzone area for uploads
- A simplified design for image uploads, this is only a first step towards more redesign of this area in the future

### Notable fixes in this PR

- Correct placeholder in thread panel
- Allows to edit the last message of a thread with arrow up
- Correctly focus composer when replying to a message
- The reply indicator is added instantly in the channel when starting a thread
- Prevents a large variety of bug where the composer could bug and prevent sending message or would clear your input while it has content

### Technical notes

To achieve this PR, three important changes have been made:

- `<ChatComposer>` has been fully rewritten and is now a glimmer component
- The chat composer now takes a `ChatMessage` as input which can directly be used in other operations, it simplifies a lot of logic as we are always working a with a `ChatMessage`
- `TextareaInteractor` has been created to wrap the existing `TextareaTextManipulation` mixin, it will make future migrations easier and allow us to have a less polluted `<ChatComposer>`

Note ".chat-live-pane" has been renamed ".chat-channel"

Design for upload dropzone is from @chapoi
2023-04-25 10:23:03 +02:00
Joffrey JAFFEUX
c1dc6a2db4
FIX: ensures activeMessage is reset with channel (#21031) 2023-04-10 08:10:01 +02:00
Joffrey JAFFEUX
c7b49a14c7
Chat/drawer ux tweaks (#21032)
- clicking empty area on the header will toggle collapse/expand it
- applies a background on hover of the channel title
- active state for small buttons
- the back button now has the correct icon color when hovered
- adds missing focus state for heade buttons icons
2023-04-10 07:43:11 +02:00
Joffrey JAFFEUX
727100d1e2
DEV: adds a addChatDrawerStateCallback API (#20640)
Usage:

```javascript
api.addChatDrawerStateCallback(({ isDrawerActive, isDrawerExpanded }) => {
  // do something
});
```

Note this commit also uses this new API to add a css class (chat-drawer-active) on the body when the drawer is active.
2023-03-10 18:49:59 +01:00
Joffrey JAFFEUX
6b0aeced7e
DEV: rework the chat-live-pane (#20519)
This PR is introducing glimmer usage in the chat-live-pane, for components but also for models. RestModel usage has been dropped in favor of native classes.

Other changes/additions in this PR:

sticky dates, scrolling will now keep the date separator of the current section at the top of the screen
better unread management, marking a channel as unread will correctly mark the correct message and not mark the whole channel as read. Tracking state will also now correctly return unread count and unread mentions.
adds an animation on bottom arrow
better scrolling behavior, we should now always correctly keep the scroll position while loading more
reactions are now more reactive, and will update their tooltip without needed to close/reopen it
skeleton has been improved with placeholder images and reactions
when making a reaction on the desktop message actions, the menu won't move anymore
simplify logic and stop maintaining a list of unloaded messages
2023-03-03 13:09:25 +01:00
Joffrey JAFFEUX
435761ef58
Revert "DEV: rework the chat-live-pane (#20511)" (#20514)
This reverts commit 10e1831139.
2023-03-02 20:20:39 +01:00
Joffrey JAFFEUX
10e1831139
DEV: rework the chat-live-pane (#20511)
This PR is introducing glimmer usage in the chat-live-pane, for components but also for models. RestModel usage has been dropped in favor of native classes.

Other changes/additions in this PR:

- sticky dates, scrolling will now keep the date separator of the current section at the top of the screen
- better unread management, marking a channel as unread will correctly mark the correct message and not mark the whole channel as read. Tracking state will also now correctly return unread count and unread mentions.
- adds an animation on bottom arrow
- better scrolling behavior, we should now always correctly keep the scroll position while loading more
- reactions are now more reactive, and will update their tooltip without needed to close/reopen it
- skeleton has been improved with placeholder images and reactions
- when making a reaction on the desktop message actions, the menu won't move anymore
- simplify logic and stop maintaining a list of unloaded messages
2023-03-02 19:46:03 +01:00
Joffrey JAFFEUX
714e903e81
FIX: correctly open channel info (#20297)
A typo was preventing a click on channel title when in drawer mode to correctly open the channel info in full page.

This commit fixes the typo and adds a test.
2023-02-15 14:03:29 +10:00
Joffrey JAFFEUX
d5024d96f1
FEATURE: resizeable chat drawer (#20160)
This commit implements a requested feature: resizing the chat drawer.

The user can now adjust the drawer size to their liking, and the new size will be stored in localstorage so that it persists across refreshes. In addition to this feature, a bug was fixed where the --composer-right margin was not being correctly computed. This bug could have resulted in incorrectly positioned drawer when the composer was expanded.

Note that it includes support for RTL.
2023-02-03 15:11:12 +01:00