discourse/app/assets/stylesheets
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
..
common DEV: adds blocks support to chat messages (#29782) 2024-11-19 07:07:58 +01:00
desktop DEV: Modernize the post menu from widgets to Glimmer components (#28670) 2024-11-11 15:36:08 -03:00
mobile UX: Fix Android Firefox Mobile reply position (#29751) 2024-11-14 10:01:55 -05:00
vendor DEV: FloatKit (#23650) 2023-09-26 13:39:52 +02:00
admin.scss
admin_rtl.scss FEATURE: Serve RTL versions of admin and plugins CSS bundles for RTL locales (#21876) 2023-06-01 05:27:11 +03:00
color_definitions.scss UX: modernize the header drop shadow (#27843) 2024-07-10 14:29:36 -05:00
common.scss DEV: form-kit 2024-07-17 11:59:35 +02:00
desktop.scss
desktop_rtl.scss
embed.scss FIX: Broken hashtags on embed and publish pages (#24210) 2023-11-02 11:43:55 +10:00
ember_cli.scss
mobile.scss DEV: form-kit 2024-07-17 11:59:35 +02:00
mobile_rtl.scss
publish.scss FIX: Broken hashtags on embed and publish pages (#24210) 2023-11-02 11:43:55 +10:00
qunit-custom.scss UX: update twitter blue to X black (#26343) 2024-03-25 11:36:33 -04:00
qunit.scss DEV: Add dark theme support to QUnit (#19014) 2022-11-17 18:44:44 +01:00
wcag.scss DEV: Modernize the post menu from widgets to Glimmer components (#28670) 2024-11-11 15:36:08 -03:00
wizard.scss DEV: Update member access wizard step to use toggle group (#28013) 2024-07-29 14:07:06 +08:00
wizard_rtl.scss FEATURE: Serve RTL versions of admin and plugins CSS bundles for RTL locales (#21876) 2023-06-01 05:27:11 +03:00