discourse/app/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
..
admin UX: Make cells middle aligned; apply overview class directly to td elements (#29813) 2024-11-18 18:42:29 -07:00
base UX: Add title & adjust dnd image (#29812) 2024-11-18 19:25:41 -06:00
components DEV: adds blocks support to chat messages (#29782) 2024-11-19 07:07:58 +01:00
float-kit UX: DMenu list buttons default styling (#29250) 2024-10-21 05:05:38 +02:00
form-kit UX: DMenu list buttons default styling (#29250) 2024-10-21 05:05:38 +02:00
foundation DEV: Improve method of presenting link clicks (#29453) 2024-10-31 12:44:08 -07:00
login UX: Add progress bar to the registration flow (#27694) 2024-08-28 08:43:39 -03:00
modal FIX: Signup fields tab order and descriptions (#29772) 2024-11-15 18:17:55 -03:00
select-kit DEV: remap all core icons for fontawesome 6 upgrade (#28715) 2024-09-13 16:50:52 +01:00
table-builder DEV: removes legacy modal code (#28047) 2024-07-24 18:07:17 +02:00
d-editor.scss DEV: remap all core icons for fontawesome 6 upgrade (#28715) 2024-09-13 16:50:52 +01:00
font-variables.scss UX: ensure ios font size is always min 16px with max() fn (#29270) 2024-10-18 05:26:12 +02:00
input_tip.scss UX: Hide the error tooltip when focusing the topic title (#27531) 2024-06-19 11:55:29 -03:00
loading-slider.scss FIX: better supports ipad and hub footer nav (#25518) 2024-02-01 10:24:44 +01:00
post-action-feedback.scss FIX: allow styling of feedback on mobile (#25072) 2023-12-30 08:57:16 +11:00
printer-friendly.scss DEV: Improve method of presenting link clicks (#29453) 2024-10-31 12:44:08 -07:00
software-update-prompt.scss UX: adjust software update banner for headerless pages (#28496) 2024-08-22 16:51:26 -04:00
topic-entrance.scss DEV: Implement glimmer topic-list (#26743) 2024-05-21 14:36:15 +02:00
topic-timeline.scss UX: topic admin button should match height of siblings (#26973) 2024-05-13 11:23:00 -04:00
whcm.scss