Commit Graph

285 Commits

Author SHA1 Message Date
chapoi
ff9c6ce934
UX: fix border-radius for dropdown in chat msg actions (#25881) 2024-02-26 15:50:12 +01:00
chapoi
0dfd30f587
UX: remove margin on bookmark icon on chat msg (#25859) 2024-02-26 15:49:58 +01:00
Joffrey JAFFEUX
41790f7739
DEV: allows stop/resume streaming on a message (#25774)
```ruby
ChatSDK::Message.start_stream(message_id: 1, guardian: guardian)
ChatSDK::Message.stream(raw: "foo", message_id: 1, guardian: guardian)
ChatSDK::Message.stream(raw: "bar", message_id: 1, guardian: guardian)
ChatSDK::Message.stop_stream(message_id: 1, guardian: guardian)
```

Generally speaking only admins or owners of the message can interact with a message.  Also note, Streaming to an existing message with a different user won't change the initial user of the message.
2024-02-26 14:16:29 +01:00
Joffrey JAFFEUX
d8d756cd2f
DEV: chat streaming (#25736)
This commit introduces the possibility to stream messages. To allow plugins to use streaming this commit also ships a `ChatSDK` library to allow to interact with few parts of discourse chat.

```ruby
ChatSDK::Message.create_with_stream(raw: "test") do |helper|
  5.times do |i|
    is_streaming = helper.stream(raw: "more #{i}")
    next if !is_streaming
    sleep 2
  end
end
```

This commit also introduces all the frontend parts:
- messages can now be marked as streaming
- when streaming their content will be updated when a new content is appended
- a special UI will be showing (a blinking indicator)
- a cancel button allows the user to stop the streaming, when cancelled `helper.stream(...)` will return `false`, and the plugin can decide exit early
2024-02-20 09:49:19 +01:00
chapoi
5b9eac00b9
UX: better card alignment (#25720) 2024-02-16 16:00:55 +01:00
chapoi
292685d3de
UX: Chat browse redesign (#25698)
* UX: fix search input placeholder cutoff

* UX: use transparent button for new-channel

* UX: remove settings link

* UX: removed joined tag

* UX: increase lock icon size

* UX: use grid for channel card

* UX: chat-channel-card styling + cleanup

* UX: dont space about tabs on mobile

* specs

* PR feedback

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>

* PR feedback > translation

* Remove import

* UX: update copy

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-02-15 18:00:22 +01:00
chapoi
4deacc4aa8
UX: prevent groupname from wrapping (#25696) 2024-02-15 14:13:21 +01:00
chapoi
2bd0a8f432
UX: Onebox container sizing (#25658)
* UX: scope onebox container size to not images

* UX: increase max-width for onebox img
2024-02-13 10:06:29 +01:00
chapoi
7cd5d646d2
UX: set zindex of chat action menu higher (#25645) 2024-02-13 09:25:42 +01:00
Joffrey JAFFEUX
9961163e82
FIX: prevents discourse header to go under ipad navigation (#25542)
We had two issues which were present for a long time I think:
- one that impacts both core discourse and chat. We were not setting top on the header when `footer-nav-ipad` was present, meaning that you could make it scroll under if you try to scroll up by putting your finger on the discourse header
- one that impacted only chat. It's also present in core, but in core it's not a probem because we don't have a fixed height div. The body height was higher than the screen which would cause a second scrollbar to appear and would slightly break layout, if you scroll on this scrollbar (body).
2024-02-02 15:24:18 +01:00
chapoi
d7cd09d4ab
UX: Chat Sizing on Mobile (#25543)
* UX: increase font-size of last message + decrease emoji size

* UX: decrease size of username emoji

* UX: Mobile chat index cleanup

* UX: decrease size of chat-channel-title in thead list
2024-02-02 14:29:07 +01:00
Andrei Prigorshnev
657eba4782
FIX: only use mention styling for valid mentions in chat (#25523)
Chat should follow the same convention as topics, where invalid mentions 
are not styled the same as valid mentions. This PR makes chat use such styling.

I'm following the same pattern that we use for invalid mentions in posts – 
9bd6523581/app/assets/stylesheets/common/base/topic-post.scss (L1285-L1288)

This way it'll be easier to dry it up if we decide to do that at some point.
2024-02-02 15:56:56 +04:00
Joffrey JAFFEUX
550895a970
FEATURE: adds a link to original message (#25503)
This commit adds a link to the original message of a thread, this link will:
- load the channel message and highlight it while keeping thread panel open on desktop
- open the channel and highlight the message in mobile (and close thread panel, as mobile never shows channel and thread in the same view)

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
2024-02-01 18:27:38 +01:00
Joffrey JAFFEUX
4c25266cf7
FIX: better supports ipad and hub footer nav (#25518)
Since https://github.com/discourse/discourse/pull/25501 this behavior was broken. This PR attempts to fix it by being more fine grain.

Also note that this PR is moving `footer-nav-ipad` and `footer-nav-visible` to the `html` element and not the `body`. It makes more sense as we are already adding most of other global state class like `keyboard-visible` to the `html` element.

Tested on:
- chrome desktop
- safari ios - iphone
- PWA ios - iphone
- PWA ios - ipad
- DiscourseHub iphone
2024-02-01 10:24:44 +01:00
Joffrey JAFFEUX
ec26dc51cd
UX: shows PWA/Hub footer navigation on chat (#25501)
This commit sets a default of 0px for `--footer-nav-height` and set it only when `body.footer-nav-visible` allowing us to safely use `--footer-nav-height` wherever it will be needed if set.
2024-01-31 14:41:12 +01:00
Jan Cernik
8654757581
FIX: Hide 'My Threads' if no followed channels have threads (#25470)
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-01-30 10:53:32 -03:00
Jan Cernik
ab326d10d8
FIX: Make long thread titles readable (#25456)
When reaching the top of a thread, the full thread title will be displayed if it was too long to fit.
It works in mobile, drawer mode, and fullscreen.
---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-01-30 14:18:00 +01:00
David Battersby
6b3a68e562
FEATURE: Mobile Chat Notification Badges (#25438)
This change adds notification badges to the new footer tabs on mobile chat, to help users easily find areas where there’s new activity to review.

When on mobile chat:
- Show a badge on the DMs footer when there is unread activity in DMs.
- Show a badge on the Channels footer tab when there is unread channel activity.
- Show a badge on the Threads footer tab when there is unread activity in a followed thread.
- Notification badges should be removed once the unread activity is viewed.

Additionally this change will:
- Show green notification badges for channel mentions or DMs
- Show blue notification badges for unread messages in channels or threads

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
2024-01-29 10:38:14 +08:00
Kris
6b185f8655
PERF: eliminate some slow CSS selectors (#25392) 2024-01-26 13:10:45 -05:00
chapoi
08b882097a
UX: chat > channel info: show member count on tab (#25439)
* UX: chat > channel info: show member count on tab
2024-01-26 12:10:56 +01:00
Joffrey JAFFEUX
7b173e883f
FEATURE: display last message on mobile (#25384)
Direct messages on mobile will now display the last message in the channels list.
2024-01-25 15:30:21 +01:00
Jarek Radosz
126ed84bbb
DEV: Remove unused chat css (#25363)
There are no longer any references to `chat-tabs`/`tabpanel` outside this scss files
2024-01-23 06:56:17 +08:00
Jan Cernik
f4e51e0789
FEATURE: Allow users to DM groups in chat (#25189)
Allows users to create DMs by selecting groups as a target. It also allows adding user groups to an existing chat

- When creating the channel, it expands the user group and adds all its members with chat enabled to the channel.
- After creation, there's no difference between adding a group or adding its members individually.
- Users can add multiple groups and users simultaneously.
- There are UI validations; the member count preview updates according to the member count of added groups, and it does not allow users to add more members than SiteSetting.chat_max_direct_message_users."
2024-01-19 11:09:47 -03:00
David Battersby
4512e5652f
FEATURE: Mobile Chat Footer Redesign (#25161)
This update adds three tabs to the bottom of the chat overlay to make it easier for users to navigate chat on mobile.

As a result of this change:

- Direct Messages are now shown separately from public channels on mobile
- My Threads has now moved from the channel list to it's own tab on mobile
- My Threads can still be accessed on desktop via the sidebar and within the drawer channel list
- Chat back button has been updated to navigate to the correct tab (for both channels and threads)

Some special cases:

- If DMs are not used then the tab is not rendered
- If the user has no threads then the tab is not rendered
- If both the tabs for DMs and Threads aren't available then the whole footer will not be rendered
- Chat footer is only shown on the listing pages (DMs, Channels, My Threads)

---------

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-01-16 14:29:33 +08:00
Kris
731699a7cf
UX: adjust onebox styles for chat, title line-height (#25249) 2024-01-12 18:14:26 -05:00
Kris
92708f2ff5
DEV: remove :has selector from chat settings (#25248) 2024-01-12 18:04:27 -05:00
chapoi
190a8db55d
UX: remove lock icon positioning (#25241) 2024-01-12 15:53:57 +01:00
chapoi
b063d92ad1
UX: chat header size and alignments (#25239)
This commit:

- increased the size of chat-header-offset from 46px to 56px on mobile
- tweaked navbar padding
- Increased the gap between back button and title; this means no more perfect alignment, but I think that's perfectly fine and a fair trade off for an easier click target for the back button without fear of hitting the title
2024-01-12 14:27:44 +01:00
Jarek Radosz
b43bba7dd7
UX: Improve border-radius stuff in chat-message actions (#25129) 2024-01-04 12:33:07 +01:00
Joffrey JAFFEUX
9ebe21df82
FIX: prevents audio container to overflow container (#25012) 2023-12-22 09:38:21 +01:00
chapoi
22d4fbf59c
UX: chat navbar > alignments part 2 (#24985)
* UX: chat navbar > alignments part 2

* Change copy to be consistent My threads

* Dont show back button on full page desktop
2023-12-20 16:24:10 +01:00
Alan Guo Xiang Tan
cdd66b24ec
Revert "UX: typo (#24971)" (#24979)
This reverts commit b8a36dd870.

Commit is breaking the build
2023-12-20 13:20:34 +08:00
chapoi
63b217c2bc
UX: chat navbar header specific case (#24972) 2023-12-19 16:37:16 +01:00
chapoi
70f0cb610a
UX: Chat info area back button + styling tweaks (#24966)
## Back button to navigate out of add-member area

Currently on mobile, once you're in the member area, there is no easy to return to the general settings area, except exiting the settings altogether, which isn't very user friendly. A go-back link solves the problem.

## Styling tweaks

* Removed the background from the leave button
* Added more spacing between the sections on desktop and removed the fixed height for rows

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-12-19 16:28:07 +01:00
chapoi
b8a36dd870
UX: typo (#24971) 2023-12-19 16:26:47 +01:00
chapoi
558c709fef
UX: align navbar and composer uploads (#24970) 2023-12-19 15:41:51 +01:00
chapoi
9f4fbd0279
UX: use same colour for thread icon as for indicator when unread (#24967) 2023-12-19 12:09:09 +01:00
chapoi
dce5e811ef
UX: chat channel info area > classname changes (#24954) 2023-12-18 22:09:47 +01:00
Joffrey JAFFEUX
608ce620fb
FIX: chat navbar followups (#24953)
- displays title on threads screen on one line instead of two on mobile

- ensures chat is not overflowing the screen width
2023-12-18 21:39:36 +01:00
Joffrey JAFFEUX
2ed59266a9
FIX: chat navbar follow-ups (#24951)
- correctly accounts for navbar height on ipad and when keyboard is open
- fixes an incorrect I18n key
2023-12-18 20:22:13 +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
Penar Musaraj
8a4ab79be2
DEV: Improve header offset calculation (#24910) 2023-12-15 15:29:17 +01:00
chapoi
7da33ad6ba
UX: user threads styling tweaks 2023-12-13 14:10:52 +01:00
Joffrey JAFFEUX
875966cc9e
FIX: ensures border and shadow of header is visible (#24847) 2023-12-12 14:18:36 +01:00
Jarek Radosz
41942357ed
DEV: Use class attribute instead of @class arg (#24804) 2023-12-12 13:09:05 +01:00
Joffrey JAFFEUX
fca67117ee
FIX: incorrect spacing with my threads on ios (#24843)
- sticky doesn't work well with overflow: hidden parents. These overflows were used to hide other issues which shouldn't exist anyways. If it causes issues we should fix the root cause.

- our `--header-offset` is changing a lot on safari while scrolling, sometimes with very unexpected value like: negative or very high value, which causes the navbar to appear at unexpected positions for few ms, this commit is using the value of the header on insert and not changing it after, it shouldn't cause any issue.
2023-12-12 11:32:36 +01:00
Joffrey JAFFEUX
2e25e95ce1
UI: ensures emojis are correctly aligned in reactions (#24814)
Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
2023-12-11 14:29:16 +01:00
Joffrey JAFFEUX
54724f7c09
UX: allow users to click thread title to open it (#24816) 2023-12-11 13:54:00 +01:00
chapoi
8e373bc167
UX: prevent chat channel avatar from getting squished (#24815) 2023-12-11 09:52:12 +01:00
Joffrey JAFFEUX
09277bc543
FEATURE: my threads page (#24771)
This commit adds a new "My threads" link in sidebar and drawer. This link will open the "/chat/threads" page which contains all threads where the current user is a member. It's ordered by activity (unread and then last message created).

Moreover, the threads list of a channel page is now showing every threads of a channel, and not just the ones where you are a member.
2023-12-11 07:38:07 +01:00