Commit Graph

395 Commits

Author SHA1 Message Date
chapoi
3a11e70b3d
UX: chat drawer hover effect width calc fix (#29910) 2024-11-26 03:25:12 +01:00
Joffrey JAFFEUX
66409fa8b4
UX: improved collapsed drawer state/interactions (#29850)
- Clicking the channel title of a collapsed drawer will only open the drawer, and not open settings
- Remove the back button when the drawer is collapsed
- Uses same icon for toggling on chat that composer
- add max-width to minimised drawer + add hover effect
---------

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
2024-11-25 03:39:03 +01:00
Penar Musaraj
7776773a11
FIX: Simplify max-height calculation for chat composer (#29822)
In some rare cases, this was causing the input to be invisible. The
change here means the input will have a smaller max height, but since
here we are limiting this to 25% of the viewport height, it should be
more than fine.

It's also not necessary to include the `chat-header-offset`, it ends up
being only a few pixels' difference (since, again, it is divided by 4).
2024-11-19 12:18:05 -05:00
Joffrey JAFFEUX
582de0ffe3
DEV: adds blocks support to chat messages (#29782)
Blocks allow BOTS to augment the capacities of a chat message. At the moment only one block is available: `actions`, accepting only one type of element: `button`.

<img width="708" alt="Screenshot 2024-11-15 at 19 14 02" src="https://github.com/user-attachments/assets/63f32a29-05b1-4f32-9edd-8d8e1007d705">

# Usage

```ruby
Chat::CreateMessage.call(
  params: {
    message: "Welcome!",
    chat_channel_id: 2,
    blocks: [
      {
         type: "actions",
         elements: [
           { value: "foo", type: "button", text: { text: "How can I install themes?", type: "plain_text" } }
         ]
      }
    ]
  },
  guardian: Discourse.system_user.guardian
)
```

# Documentation

## Blocks

### Actions

Holds interactive elements: button.

#### Fields

| Field | Type | Description | Required? |
|--------|--------|--------|--------|
| type | string | For an actions block, type is always `actions` | Yes |
| elements | array | An array of interactive elements, maximum 10 elements | Yes |
| block_id | string | An unique identifier for the block, will be generated if not specified. It has to be unique per message | No |

#### Example

```json
{
  "type": "actions",
  "block_id": "actions_1",
  "elements": [...]
}
```

## Elements

### Button

#### Fields

| Field | Type | Description | Required? |
|--------|--------|--------|--------|
| type | string | For a button, type is always `button` | Yes |
| text | object | A text object holding the type and text. Max 75 characters | Yes |
| value | string | The value returned after the interaction has been validated. Maximum length is 2000 characters | No |
| style | string | Can be `primary` ,  `success` or `danger` | No |
| action_id | string | An unique identifier for the action, will be generated if not specified. It has to be unique per message | No |

#### Example

```json
{
  "type": "actions",
  "block_id": "actions_1",
  "elements": [
    {
      "type": "button",
      "text": {
          "type": "plain_text",
          "text": "Ok"
      },
      "value": "ok",
      "action_id": "button_1"
    }
  ]
}
```

## Interactions

When a user interactions with a button the following flow will happen:

- We send an interaction request to the server
- Server checks if the user can make this interaction
- If the user can make this interaction, the server will:

  * `DiscourseEvent.trigger(:chat_message_interaction, interaction)`
  * return a JSON document
  
  ```json
  {
    "interaction": {
        "user": {
            "id": 1,
            "username": "j.jaffeux"
        },
        "channel": {
            "id": 1,
            "title": "Staff"
        },
        "message": {
            "id": 1,
            "text": "test",
            "user_id": -1
        },
        "action": {
            "text": {
                "text": "How to install themes?",
                "type": "plain_text"
            },
            "type": "button",
            "value": "click_me_123",
            "action_id": "bf4f30b9-de99-4959-b3f5-632a6a1add04"
        }
    }
  }
  ```
  * Fire a `appEvents.trigger("chat:message_interaction", interaction)`
2024-11-19 07:07:58 +01:00
David Battersby
8dc772f2a8
UX: prevent shrinking unread badge for long DM channel names (#29756)
Fixes a small UX issue where the unread badge gets squashed in long DM channel names.
2024-11-14 15:27:14 +04:00
Joffrey JAFFEUX
1d9f064d83
FIX: correctly account for composer height in PWA (#29656) 2024-11-08 11:16:15 +09:00
Joffrey JAFFEUX
3d1571a852
UX: do not hide topic composer in mobile chat (#29633) 2024-11-07 14:49:59 +09:00
Joffrey JAFFEUX
88eb96b315
DEV: sets an icon_upload_id on a channel (#29566)
There's no UI for it at the moment but when creating a channel or updating it, it's now possible to pass `icon_upload_id` as param. This will be available on the channel as `icon_upload_url`.
2024-11-04 17:19:44 +09:00
Penar Musaraj
041ac3d8b7
DEV: Refactor header offset calculations (#29398) 2024-10-31 09:50:01 -04:00
David Battersby
35f441739c
UX: fix emoji alignment in chat members user status (#29466)
Improves layout of channel members list with user status emojis.
2024-10-29 17:18:09 +04:00
David Taylor
aa89acbda6
DEV: Upgrade Uppy to v4 (#29397)
Key changes include:

- `@uppy/aws-s3-multipart` is now part of `@uppy/aws-s3`, and controlled with a boolean

- Some minor changes/renames to Uppy APIs

- Uppy has removed batch signing from their S3 multipart implementation. This commit implements a batching system outside of Uppy to avoid needing one-signing-request-per-part

- Reduces concurrent part uploads to 6, because S3 uses HTTP/1.1 and browsers limit concurrent connections to 6-per-host.

- Upstream drop-target implementation has changed slightly, so we now need `pointer-events: none` on the hover element
2024-10-28 14:01:44 +00:00
chapoi
c1325dbe13
UX: prevent unread indicator from shrinking in flexbox (#29207) 2024-10-15 10:08:45 +02:00
chapoi
3c03d9b1e5
UX: chat index flex issues (#29157) 2024-10-10 12:55:08 +02:00
chapoi
d58a2b853f
UX: fix missing text overflow ellipsis in chat index pages (#29150) 2024-10-10 09:57:32 +02:00
chapoi
d64d0ddd3d
UX: fix overflow on thread index pages (mobile) (#29126) 2024-10-08 15:27:41 +02:00
chapoi
0ba7a7ecab
UX: new sidebar styling (#29119) 2024-10-08 11:28:36 +02:00
chapoi
8d1867688f
UX: add padding bottom to chat index list (#29096) 2024-10-07 07:09:27 +02:00
Penar Musaraj
d959bfdc61
UX: Improve bottom padding to chat index on mobile (#29086)
Minor adjustment to #29082
2024-10-04 11:33:38 -04:00
chapoi
c13ca6eb19
UX: chat index mini refactor (#29082) 2024-10-04 08:10:36 -04:00
chapoi
9b383e3729
UX: chat composer style tweaks (#28938) 2024-09-18 02:45:44 +02:00
Joffrey JAFFEUX
2aca41914a
FEATURE: supports mark tag in chat messages (#28949)
This brings feature parity with posts where you can use this tag.
2024-09-17 20:52:34 +02:00
chapoi
0923f5e3a7
UX: small colour change to chat composer insert button (#28904) 2024-09-17 03:31:55 +02:00
Kris
a914d3230b
DEV: remap all core icons for fontawesome 6 upgrade (#28715)
Followup to 7d8974d02f

Co-authored-by: David Taylor <david@taylorhq.com>
2024-09-13 16:50:52 +01:00
chapoi
b59056780c
UX: upodate stying of chat composer focused state (#28900) 2024-09-13 07:34:40 +02:00
David Battersby
d5670069f5
UX: fix spacing of emoji in chat channel title (#28756)
Fixes a small spacing bug with emoji in channel titles
2024-09-05 16:43:06 +04:00
David Battersby
e991574389
UX: chat drawer increase unread channel visibility (#28731)
This change increases the visibility of unread channels to make them stand out more in drawer mode (desktop).

When a channel is unread:

- it floats to the top;
- when multiple channels are unread, they are sorted alphabetically (equal to how it’s done on mobile)
- the unread indicator blue dot moves to directly right of the channel name
2024-09-05 13:36:50 +04:00
David Battersby
a2f625a0ef
DEV: remove CSS for consolidated DM notifications (#28728)
Removes unused CSS that was a temporary fix for a new notification type that was later reverted.
2024-09-04 11:39:49 +04:00
Joffrey JAFFEUX
b4a8873596
DEV: changes identifier from card to usercard (#28575) 2024-08-27 14:08:49 +02:00
Joffrey JAFFEUX
ccb1861ada
DEV: better highlighting of mentions (#28403)
This commit improves the hilight-ing of mentions in posts and chat messages.

- `@here` and `@all` will generate a `<a class="mention --wide">`
- bots will generate a `<a class="mention --bot">`
- current user will generate a `<a class="mention --current">`

To achieve this change the following value transformer has been added: "mentions-class". It will be run in posts and chat messages after the mention is rendered.

A bug were bots were not considered in mentioned users has also been fixed as part of this PR.
2024-08-20 14:37:28 +02:00
chapoi
b3bf465890
UX: remove baseline alignment from chat timestamp (#28345) 2024-08-13 17:07:12 +02:00
Kris
76b28ed836
UX: fix user profile button wrap, clean up styles (#28255) 2024-08-06 17:47:51 -04:00
Gabriel Grubba
a3d61ba1c4
DEV: rename chat preferred mobile index to chat preferred index (#27953)
* DEV: rename chat preferred mobile index to chat preferred index

* UX: change routing to be consistent with mobile

* DEV: change migration file to use script

* UX: show footer only if more than one option is available

* UX: Remove desktopView only checks for chat

* DEV: Remove unused imports

* UX: Update chat footer checks and Add rerouting to chat drawer

* UX: Add margin to chat row in desktop and update chat drawer logic

* UX: Change chat in desktop to use flexbox

* UX: Add drawer actions to chat navbar

* DEV: Update page object with new chat css classes

removed `.open-browse-page-btn` usage in 7bd65006d7

* DEV: rename `browse/open` in chat url to `channels`

* UX: Adjust css for when in threads mode

* DEV: change css class name in no_sidebar_spec.rb

* DEV: rename tests to be more descriptive with the action they are testing

update chat template to not rely on `:has`

* DEV: update test and add method to chat page object

* DEV: update no_sidebar_spec for chat changes

* DEV: remove tests from navigation_spec that no longer apply

* DEV: revert typo in test

* DEV: change url path for mobile chat in test specs

* DEV: Add check for when is desktop in rerouting

* UX: Removed footer from desktop.

Made `hasThreads` and `hasDirectMessages` methods in chat-drawer public

* UX: remove sidebar on desktop full page if dm list is empty

* DEV: Address review comments

* DEV: Adjust reroute logic for chat browse

remove unused code

* UX: Adjust rerouting to go to browse.open

* UX: Change rerouting to be more consistent

Add chat_default_channel_id routing

* UX: Update rerouting configuration for chat routes

* DEV: Update tests with the new chat behavior

* DEV: revert changes made in tests and bring back toggle for drawer

* DEV: revert classes in page objects

* DEV: Add tests to new chat navigation behavior

remove unused stylesheets
revert deleted lines in tests
update concat class logic in chat dm template

* DEV: update css on test
2024-07-30 10:25:22 -03:00
Joffrey JAFFEUX
7a7cc815be
DEV: removes legacy modal code (#28047) 2024-07-24 18:07:17 +02:00
chapoi
5b693c61af
UX: change sidebar background to secondary (#28043) 2024-07-23 15:56:21 +02:00
Joffrey JAFFEUX
c74fa300e7
FEATURE: allows browse page in chat drawer (#27919)
This commit ensures the browse page can be loaded in the drawer and doesn’t force full page mode.

Other notable changes of this commit:
- be consistent about wrapping each full page route with "c-routes.--route-name" and each drawer container with "c-drawer-routes.--route-name"
- move browse channels into its own component, it was before in the template of the channels browse
2024-07-16 12:34:37 +02:00
Joffrey JAFFEUX
897518e874
FIX: ensures chat panel can't have an invalid width (#27876)
Prior to this fix the following sequence would cause an overflow:

- open a thread
- expand thread panel to maximum width
- close panel
- reduce window width
- open thread again
- 💥

The fix is now ensuring that we never use or set a width which would cause the main panel + side panel to be larger than the chat container. We also removed the service as it was overkill for this case and it's easier to have all the implementation at one place.

This commit also uses JS animation api to set the width of the panel.

<!-- NOTE: All pull requests should have tests (rspec in Ruby, qunit in JavaScript). If your code does not include test coverage, please include an explanation of why it was omitted. -->
2024-07-11 20:27:30 +02:00
Kris
c780e764d0
A11Y: usercard resizing for high zoom levels (#27846) 2024-07-10 14:51:56 -04:00
Kris
4ee64ad168
UX: fix card positioning, allow shrink-to-fit (#27774) 2024-07-08 17:30:43 -04:00
chapoi
2db35149fd
UX: Chat mobile menu styling update (#27598) 2024-07-04 18:02:30 +02:00
Jan Cernik
e161086630
FIX: User controls buttons order for admins (#27646) 2024-06-28 18:32:25 -03:00
chapoi
9f40ac0918
UX: revert chat footer changes partially (#27591) 2024-06-24 17:46:54 +02:00
Kris
e5c0cfcd27
UX: remove default use of quaternary color, update nav pill styles (#27502) 2024-06-24 09:54:34 -04:00
Kris
f38bb5e3e4
UX: fix chat drawer z-index (#27568) 2024-06-21 10:09:05 -04:00
chapoi
c1f477c1b6
UX: Remove or replace button transitions with variable (#27527) 2024-06-20 19:51:20 +02:00
Jarek Radosz
1defb9449b
UX: Move user-cards above composer (#27491)
There is currently only one scenario when both the composer and a user card would be present at the same time:

if you have the composer open and then you click on something outside it that triggers a card. Which implies intent to see the card (unobstructed by the composer 😉)

The reverse doesn't happen because opening the composer would close an existing user card.

In theory there's also displaying a user card by clicking on a mention in composer's preview but that functionality is currently broken (and this PR is a prerequisite 😉)

---

I changed `.user-card, .group-card` to `.fk-d-menu[data-identifier="card"]` because that regressed when we moved user cards to float-kit – they are nested inside `.fk-d-menu` so its `z-index` is now important (effectively the cards had `z-index: z("dropdown")` instead of `z("usercard")`)
2024-06-18 15:12:41 +02:00
Kris
3a31c47d37
UX: remove padding to fix mobile thread date pinning (#27470) 2024-06-14 13:50:27 -04:00
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
chapoi
b6c2430bf6
UX: make chat drawer settingspage full height (#27385) 2024-06-10 15:25:28 +02: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
Jan Cernik
625c715856
FIX: Lazy TikTok embeds height in chat (#27306) 2024-06-03 11:20:47 -03:00