discourse/plugins/chat/assets/stylesheets/common
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
..
base-common.scss DEV: Refactor header offset calculations (#29398) 2024-10-31 09:50:01 -04:00
chat-audio-upload.scss FIX: prevents audio container to overflow container (#25012) 2023-12-22 09:38:21 +01:00
chat-browse.scss FEATURE: allows browse page in chat drawer (#27919) 2024-07-16 12:34:37 +02:00
chat-channel-card.scss UX: better card alignment (#25720) 2024-02-16 16:00:55 +01:00
chat-channel-icon.scss DEV: sets an icon_upload_id on a channel (#29566) 2024-11-04 17:19:44 +09:00
chat-channel-info.scss UX: chat > channel info: show member count on tab (#25439) 2024-01-26 12:10:56 +01:00
chat-channel-members.scss UX: fix emoji alignment in chat members user status (#29466) 2024-10-29 17:18:09 +04:00
chat-channel-name.scss UX: prevent shrinking unread badge for long DM channel names (#29756) 2024-11-14 15:27:14 +04:00
chat-channel-preview-card.scss UX: add illustrations for empty chat list + split into tabs on drawer (#26910) 2024-05-28 17:00:04 +04:00
chat-channel-row.scss UX: chat drawer increase unread channel visibility (#28731) 2024-09-05 13:36:50 +04:00
chat-channel-settings.scss DEV: remove :has selector from chat settings (#25248) 2024-01-12 18:04:27 -05:00
chat-channel-title.scss UX: Chat avatar is-online styling (#26012) 2024-03-08 21:11:47 +01:00
chat-channel.scss FEATURE: implements last read message for threads (#26702) 2024-04-25 10:47:54 +02:00
chat-composer-button.scss UX: chat composer style tweaks (#28938) 2024-09-18 02:45:44 +02:00
chat-composer-dropdown.scss UX: small colour change to chat composer insert button (#28904) 2024-09-17 03:31:55 +02:00
chat-composer-separator.scss Revert "UX: chat composer (#23267)" (#23273) 2023-08-25 13:49:41 -05:00
chat-composer-upload.scss Remove border radius from chat (#22437) 2023-07-10 15:07:38 +02:00
chat-composer-uploads.scss UX: align navbar and composer uploads (#24970) 2023-12-19 15:41:51 +01:00
chat-composer.scss DEV: Refactor header offset calculations (#29398) 2024-10-31 09:50:01 -04:00
chat-drawer-routes.scss FEATURE: allows browse page in chat drawer (#27919) 2024-07-16 12:34:37 +02:00
chat-drawer.scss UX: fix chat drawer z-index (#27568) 2024-06-21 10:09:05 -04:00
chat-emoji-picker.scss Remove border radius from chat (#22437) 2023-07-10 15:07:38 +02:00
chat-footer.scss UX: revert chat footer changes partially (#27591) 2024-06-24 17:46:54 +02:00
chat-form.scss UX: Chat info area back button + styling tweaks (#24966) 2023-12-19 16:28:07 +01:00
chat-height-mixin.scss FIX: correctly account for composer height in PWA (#29656) 2024-11-08 11:16:15 +09:00
chat-index.scss UX: add padding bottom to chat index list (#29096) 2024-10-07 07:09:27 +02:00
chat-mention-warnings.scss DEV: implements <Chat::Navbar /> (#24917) 2023-12-18 17:49:58 +01:00
chat-message-actions.scss UX: Remove or replace button transitions with variable (#27527) 2024-06-20 19:51:20 +02:00
chat-message-blocks.scss DEV: adds blocks support to chat messages (#29782) 2024-11-19 07:07:58 +01:00
chat-message-collapser.scss FIX: Resize chat collapser when using small width drawer (#21017) 2023-04-08 10:43:17 -03:00
chat-message-creator.scss UX: prevent unread indicator from shrinking in flexbox (#29207) 2024-10-15 10:08:45 +02:00
chat-message-error.scss REFACTOR: <ChatMessage> component (#22172) 2023-06-19 09:50:54 +02:00
chat-message-images.scss FIX: Lazy TikTok embeds height in chat (#27306) 2024-06-03 11:20:47 -03:00
chat-message-info.scss UX: hide user count in original message link (#26890) 2024-05-06 22:02:15 +02:00
chat-message-left-gutter.scss DEV: Fix random typos (#21638) 2023-05-18 15:34:46 +02:00
chat-message-separator.scss UX: chat > general fixes (#25929) 2024-02-28 15:12:13 +01:00
chat-message-text.scss UX: removes blinking indicator while streaming message (#27131) 2024-05-22 13:48:44 +02:00
chat-message-thread-indicator.scss FIX: improves linking of thread messages (#26095) 2024-03-08 09:09:42 +01:00
chat-message.scss FEATURE: supports mark tag in chat messages (#28949) 2024-09-17 20:52:34 +02:00
chat-messages-scroller.scss FEATURE: implements last read message for threads (#26702) 2024-04-25 10:47:54 +02:00
chat-modal-archive-channel.scss DEV: makes chat modals use the new <DModal /> component (#22495) 2023-07-10 13:43:33 +02:00
chat-modal-channel-summary.scss DEV: makes chat modals use the new <DModal /> component (#22495) 2023-07-10 13:43:33 +02:00
chat-modal-create-channel.scss DEV: removes legacy modal code (#28047) 2024-07-24 18:07:17 +02:00
chat-modal-edit-channel-description.scss DEV: makes chat modals use the new <DModal /> component (#22495) 2023-07-10 13:43:33 +02:00
chat-modal-move-message-to-channel.scss DEV: makes chat modals use the new <DModal /> component (#22495) 2023-07-10 13:43:33 +02:00
chat-modal-new-message.scss DEV: removes legacy modal code (#28047) 2024-07-24 18:07:17 +02:00
chat-navbar.scss UX: fix chat title margin on drawer and side panel (#26171) 2024-03-14 13:41:42 +08:00
chat-notices.scss FIX: ensures chat panel can't have an invalid width (#27876) 2024-07-11 20:27:30 +02:00
chat-onebox.scss FEATURE: Add onebox support for chat threads (#23580) 2023-10-25 14:30:39 +02:00
chat-reply.scss UX: Fix chat-reply overflow (#20592) 2023-03-08 21:12:49 +01:00
chat-replying-indicator.scss A11Y: disable non-essential CSS animations for reduced-motion users (#23571) 2023-09-14 17:31:43 -04:00
chat-scroll-to-bottom.scss FEATURE: thread pagination (#22624) 2023-07-27 09:57:03 +02:00
chat-section.scss FEATURE: new jump to channel menu (#22383) 2023-07-05 18:18:27 +02:00
chat-selection-manager.scss A11Y: disable non-essential CSS animations for reduced-motion users (#23571) 2023-09-14 17:31:43 -04:00
chat-side-panel-resizer.scss DEV: implements <Chat::Navbar /> (#24917) 2023-12-18 17:49:58 +01:00
chat-skeleton.scss A11Y: disable non-essential CSS animations for reduced-motion users (#23571) 2023-09-14 17:31:43 -04:00
chat-thread-header.scss DEV: implements <Chat::Navbar /> (#24917) 2023-12-18 17:49:58 +01:00
chat-thread-list-header.scss DEV: implements <Chat::Navbar /> (#24917) 2023-12-18 17:49:58 +01:00
chat-thread-list-item.scss FEATURE: my threads page (#24771) 2023-12-11 07:38:07 +01:00
chat-thread-participants.scss UX: thread list design changes (#23348) 2023-08-31 18:09:41 +02:00
chat-thread-title.scss UX: allow users to click thread title to open it (#24816) 2023-12-11 13:54:00 +01:00
chat-thread-unread-indicator.scss FEATURE: my threads page (#24771) 2023-12-11 07:38:07 +01:00
chat-thread.scss FEATURE: implements last read message for threads (#26702) 2024-04-25 10:47:54 +02:00
chat-threads-list.scss FIX: Make long thread titles readable (#25456) 2024-01-30 14:18:00 +01:00
chat-transcript.scss UX: constrain width of chat transcripts in posts (#27288) 2024-05-31 16:26:46 -04:00
chat-unread-indicator.scss UX: user threads styling tweaks 2023-12-13 14:10:52 +01:00
chat-upload-drop-zone.scss DEV: Upgrade Uppy to v4 (#29397) 2024-10-28 14:01:44 +00:00
chat-user-avatar.scss UX: Chat avatar is-online styling (#26012) 2024-03-08 21:11:47 +01:00
chat-user-threads.scss UX: new sidebar styling (#29119) 2024-10-08 11:28:36 +02:00
core-extensions.scss DEV: remove CSS for consolidated DM notifications (#28728) 2024-09-04 11:39:49 +04:00
dc-filter-input.scss UX: Chat browse redesign (#25698) 2024-02-15 18:00:22 +01:00
direct-message-creator.scss Remove border radius from chat (#22437) 2023-07-10 15:07:38 +02:00
incoming-chat-webhooks.scss Remove border radius from chat (#22437) 2023-07-10 15:07:38 +02:00
index.scss DEV: adds blocks support to chat messages (#29782) 2024-11-19 07:07:58 +01:00
reviewable-chat-message.scss
sidebar-extensions.scss UX: Emoji aligment fixes, followup to #26491 (#26618) 2024-04-12 10:48:14 +02:00