discourse/app/assets/stylesheets/common/components
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
..
sidebar/edit-navigation-menu UX: clean up some label and form inconsistencies, reduce excess bolding (#25701) 2024-02-15 11:27:51 -05:00
_index.scss UX: DMenu list buttons default styling (#29250) 2024-10-21 05:05:38 +02:00
add-pm-participants.scss FIX: remove redundant body scroll lock (#29395) 2024-10-24 13:41:08 -04:00
badges.scss DEV: Improve method of presenting link clicks (#29453) 2024-10-31 12:44:08 -07:00
banner.scss
bookmark-list.scss
bookmark-menu.scss DEV: implements <DropdownMenu /> (#26917) 2024-05-08 09:08:42 +02:00
bookmark-modal.scss UX: improves modal on mobile (#26055) 2024-03-22 16:29:32 +01:00
buttons.scss DEV: adds blocks support to chat messages (#29782) 2024-11-19 07:07:58 +01:00
calendar-date-time-input.scss DEV: Move calendar date + time picker from local dates into core component (#23023) 2023-08-11 13:05:44 +10:00
char-counter.scss FEATURE: Add word count and indicator when exceeded max (#19367) 2023-02-20 12:06:43 +01:00
color-input.scss PERF: eliminate some slow CSS selectors (#25392) 2024-01-26 13:10:45 -05:00
conditional-loading-section.scss A11Y: disable non-essential CSS animations for reduced-motion users (#23571) 2023-09-14 17:31:43 -04:00
convert-to-public-topic-modal.scss
d-breadcrumbs.scss UX: Implement new top-level nav on admin plugin pages (#27126) 2024-05-29 12:20:55 +10:00
d-lightbox.scss FIX: remove background image from lightbox backdrop (#24225) 2023-11-03 16:10:04 +08:00
d-toggle-switch.scss DEV: form-kit 2024-07-17 11:59:35 +02:00
date-input.scss
date-picker.scss
date-time-input-range.scss
date-time-input.scss
download-calendar.scss DEV: FloatKit (#23650) 2023-09-26 13:39:52 +02:00
file-size-input.scss FIX: Make cancel and reset buttons work for file_size_restriction settings (#28347) 2024-08-15 19:38:47 +03:00
footer-nav.scss DEV: Remove body docked class and its scroll event listener (#29515) 2024-10-31 10:21:50 -04:00
form-template-field.scss FEATURE: support a description attribute on form template fields (#23744) 2023-10-04 17:51:53 -03:00
group-member-dropdown.scss DEV: Set containing block for Popper dropdowns (#20745) 2023-03-20 15:26:20 -04:00
groups-form-membership-fields.scss
hashtag.scss UX: Tweak the mention padding (#26492) 2024-04-05 22:23:37 +02:00
horizontal-overflow-nav.scss UX: remove default use of quaternary color, update nav pill styles (#27502) 2024-06-24 09:54:34 -04:00
iframed-html.scss
ignored-user-list.scss UX: fix color preference layout (#21346) 2023-05-03 10:11:52 +08:00
keyboard_shortcuts.scss FEATURE: Add keyboard shortcuts for jumping to unread channels (#29734) 2024-11-18 11:18:58 +11:00
more-topics.scss UX: spacing fix for related topics on mobile (#27940) 2024-07-16 17:51:55 -04:00
navs.scss UX: remove default use of quaternary color, update nav pill styles (#27502) 2024-06-24 09:54:34 -04:00
offline-indicator.scss FEATURE: Offline indicator (#21369) 2023-06-05 11:08:04 -05:00
pick-files-button.scss
powered-by-discourse.scss UX: Add progress bar to the registration flow (#27694) 2024-08-28 08:43:39 -03:00
relative-time-picker.scss UX: minor fixes in topic action modal (#24772) 2023-12-07 14:54:56 +01:00
signup-progress-bar.scss UX: Visual adjustments to login/signup forms (#28680) 2024-10-25 09:34:59 -03:00
svg.scss
tap-tile.scss UX: highlight vars updates (#20346) 2023-02-21 10:15:49 +01:00
theme-card.scss UX: Look and feel changes (#29245) 2024-10-29 12:25:17 +10:00
time-input.scss DEV: removes legacy modal code (#28047) 2024-07-24 18:07:17 +02:00
time-shortcut-picker.scss UX: fix time pickers input width on mobile (#21170) 2023-04-19 10:08:24 -05:00
topic-map.scss DEV: Improve method of presenting link clicks (#29453) 2024-10-31 12:44:08 -07:00
topic-query-filter.scss UX: Make input on /filter route full width (#20952) 2023-04-04 14:10:39 +10:00
user-card.scss UX: limit user-card focus ring to desktop (#29435) 2024-10-28 10:10:03 -04:00
user-info.scss UX: add space to following list (#27154) 2024-05-23 17:26:15 +04:00
user-status-message.scss FIX: Add the ident to fix user status styling in posts (#26585) 2024-04-10 01:44:37 +02:00
user-status-picker.scss UX: update appropriate btn-flat instances to btn-transparent (#25945) 2024-02-29 11:47:07 +01:00
user-stream-item.scss UX: prevent user stream title from overflowing page (#29032) 2024-09-30 13:10:23 -04:00
user-stream.scss
welcome-header.scss UX: Add progress bar to the registration flow (#27694) 2024-08-28 08:43:39 -03:00
widget-dropdown.scss REFACTOR: improve poll info layout (#22353) 2023-07-05 12:20:18 -04:00