feat(RM-322): Components v2 Panel Builder

docs/.vitepress/config.mts

@@ -310,6 +310,10 @@ export default defineConfig({
                 text: "Start Ticket From Message",
                 link: "/dashboard/settings/start-ticket-from-message",
               },
+              {
+                text: "Components v2 Builder",
+                link: "/dashboard/settings/components-v2-builder",
+              },
               {
                 text: "Placeholders",
                 link: "/miscellaneous/placeholders",
@@ -370,6 +374,10 @@ export default defineConfig({
             text: "Close Requests",
             link: "/features/close-requests",
           },
+          {
+            text: "Components v2 Builder",
+            link: "/dashboard/settings/components-v2-builder",
+          },
           {
             text: "Exit Survey",
             link: "/dashboard/settings/exit-survey",

docs/src/en/dashboard/multi-panels.md

@@ -12,7 +12,7 @@ Open the dashboard, select your server, and click **Panels** in the sidebar. The
 
 ![Multi-panel create](../../img/dashboard/multipanels/multipanel-create.webp)
 
-The editor is divided into three sections described below. After configuring the multi-panel, click **Create Multi Panel** at the bottom of the page.
+The editor starts with an optional **Multi-Panel Name** of up to 100 characters, which is only shown in the dashboard, followed by three sections described below. After configuring the multi-panel, click **Create Multi Panel** at the bottom of the page.
 
 ## Editing a Multi-Panel
 
@@ -75,6 +75,16 @@ Controls the appearance of the multi-panel embed itself. A live preview is shown
 
 ![Multi-panel settings](../../img/dashboard/multipanels/multipanel-settings.webp)
 
+### Message Format
+
+Choose **Classic** to use the embed fields below, or **Components v2** to build the multi-panel message from blocks and choose where each panel appears in it.
+
+[Learn more about Components v2](./settings/components-v2-builder).
+
+:::tip Premium Feature
+This is a premium feature. [Learn more about premium](https://tickets.bot/premium).
+:::
+
 ### Title
 
 The bold text at the top of the embed.

docs/src/en/dashboard/panel-gallery.md

@@ -59,7 +59,7 @@ To share one of your templates with the community:
 3. Click **Submit for Review**.
 
 :::warning Submission Requirements
-Please ensure your template has a descriptive title, meaningful content, and no server-specific references. Custom Discord emojis are not supported in gallery submissions; use standard Unicode emojis instead.
+Please ensure your template has a descriptive title, meaningful content, and no server-specific references. Custom Discord emojis are not supported in gallery submissions; use standard Unicode emojis instead. Panels that use Components v2 cannot be submitted; switch the panel message and welcome message back to **Classic** first.
 :::
 
 ## Submission Review

docs/src/en/dashboard/settings/components-v2-builder.md

@@ -0,0 +1,102 @@
+# Components v2 Builder
+
+Components v2 is an alternative way to build the messages your panels and multi-panels send. Instead of filling in the classic embed's fixed fields, you build the message from blocks, with a live preview of what will be posted.
+
+:::tip Premium Feature
+Components v2 requires [Premium](https://tickets.bot/premium).
+:::
+
+## Where You Can Use It
+
+You can choose Classic or Components v2 separately for each of these messages:
+
+- The panel message, the embed with a button that opens a new ticket. Configured in the [Panel Appearance](/dashboard/ticket-panels#panel-appearance) section of the panel editor.
+- The welcome message, sent inside a ticket channel as soon as it opens. Configured in the [Welcome Message](/dashboard/ticket-panels#welcome-message) section of the panel editor.
+- The multi-panel message, which lets someone pick which panel to open a ticket against from a dropdown or row of buttons. Configured in the [Panel Settings](/dashboard/multi-panels#panel-settings) section of the multi-panel editor.
+
+## Switching to Components v2
+
+Open the relevant section listed above and set **Message format** to **Components v2**. The embed fields are replaced with the block builder. To start from your classic embed, click **Convert from classic**. Your classic embed is kept while you use Components v2, and the blocks you last saved in Components v2 are kept when you save in Classic, so you can switch back either way.
+
+## Block Types
+
+File blocks are not available.
+
+### Container
+
+A bordered box that groups other blocks together. Give it an accent colour, or mark it as a spoiler to blur its contents until a reader clicks to reveal them.
+
+### Section
+
+One to three text blocks shown beside a small image (thumbnail) or a button. Choose which with **Image**, **Link button** or, in a panel or multi-panel message, **Panel button**.
+
+### Button Row
+
+A row of up to 5 buttons. Each button is either a **Link** button, which opens a URL, or, in a panel or multi-panel message, a **Ticket panel** button, which opens a ticket.
+
+### Text Display
+
+A block of markdown-formatted text, like the classic embed's description. [Placeholders](/miscellaneous/placeholders) can be used here, in a Section's text and in link button labels, but only in the welcome message. In link button labels, only placeholders marked **All** work, as in an embed title.
+
+### Media Gallery
+
+One to 10 images shown together in a gallery layout.
+
+### Separator
+
+A gap between blocks, with an optional dividing line and Small or Large spacing.
+
+## Adding, Removing, and Reordering Blocks
+
+Add a block with **+ Add block**. Reorder blocks with the up and down arrow buttons, and delete them with the bin button.
+
+To nest a block in a Container, choose the Container in the block's **Move into container...** menu and click **Move**. **Move out of container** returns it to the top level.
+
+## Placing Panels in a Multi-Panel
+
+In a Components v2 multi-panel, you decide where each selected panel appears:
+
+- A **Button Row** can hold ticket panel buttons as well as link buttons. Choose **Ticket panel** on a button, then pick the panel.
+- A **Section** can have a ticket panel's button beside its text. Choose **Panel button**, then pick the panel.
+- A **Panel Select** block places the panel dropdown. It lists every panel you have not placed as a button, and uses the multi-panel's placeholder text. It is only available when **Use Dropdown Menu** is enabled in the multi-panel's [Ticket Settings](/dashboard/multi-panels#use-dropdown-menu), and only one can be placed.
+
+Panels you do not place are added at the end of the message as buttons or a dropdown, depending on whether **Use Dropdown Menu** is enabled. If the message has a Panel Select block, they are listed in it instead and nothing is added at the end.
+
+## Automatic Elements
+
+The bot adds its own elements to every message:
+
+- The panel message gets its open ticket button at the end, unless you place it yourself with **Panel button** or **Ticket panel**.
+- The welcome message gets its **Close**, **Close with Reason** and, in channel mode, **Claim** buttons, unless they are hidden in the panel's [Closing and Claiming](/dashboard/ticket-panels#closing-and-claiming) settings.
+- The multi-panel message gets buttons or a dropdown for every panel you have not [placed yourself](#placing-panels-in-a-multi-panel), matching the [display mode](/dashboard/multi-panels#use-dropdown-menu) you have chosen.
+
+They cannot be edited or removed, are marked as added automatically in the live preview, and count towards the [component limit](#limits).
+
+## Limits
+
+- A message can hold 40 components in total. This includes the components the bot adds itself: the open ticket button on a panel message; the Close, Close with Reason and Claim buttons on a welcome message, along with space for five form answers and their container, which is kept even if the panel has no form; or the panel buttons or dropdown on a multi-panel.
+- Text across the whole message, including Section text, is limited to 4,000 characters in total. Link button labels do not count towards this limit.
+- A Media Gallery holds 1 to 10 images.
+- Image and link URLs must be full `http://` or `https://` addresses with a domain name, without spaces or a username and password, and at most 512 characters.
+
+## Welcome Message Details
+
+A few things work differently when the welcome message uses Components v2:
+
+- Enter `%avatar_url%` as the whole image URL of a Section thumbnail or a Media Gallery image, and the bot replaces it with the avatar of the user who opened the ticket.
+- If the panel has a [form](/dashboard/forms), the answers are added to the end of the welcome message in a container, rather than sent in a separate embed. They are not shown in the live preview. Long answers are trimmed so that the text across the whole message stays within the 4,000 character limit, and very long welcome text is trimmed to leave room for each answer.
+- `/switchpanel` leaves the welcome message as it is if the ticket's welcome message uses Components v2, or if the new panel's welcome message does while your subscription is active.
+
+## Switching a Live Panel Message Back to Classic
+
+If a panel or multi-panel message posted with Components v2 is switched back to Classic, the bot deletes it and posts a new one, because Discord cannot remove Components v2 from a message. The new message loses the old one's position in the channel and its reactions. Switching to Components v2 edits the message in place.
+
+Changing the welcome message format only affects tickets opened afterwards.
+
+## If Your Subscription Ends
+
+If your server's Premium or Whitelabel subscription ends, panel and multi-panel messages already posted with Components v2 stay in place and keep opening tickets. As with Classic panels, a server over the [free limit of 3 panels](/dashboard/ticket-panels#the-panels-page) keeps only its 3 oldest panels enabled. The others stop opening tickets, including from a multi-panel, and cannot be edited until you reactivate Premium or delete another panel.
+
+New tickets receive the classic welcome message while the subscription is inactive.
+
+To save changes to a panel or multi-panel while the subscription is inactive, switch every message on it that uses Components v2 back to **Classic**. A posted message that used Components v2 is then reposted, as described above.

docs/src/en/dashboard/ticket-panels.md

@@ -40,22 +40,36 @@ Free servers are limited to 3 panels. If cloning would exceed this limit, you wi
 
 ### Publishing to the Template Gallery
 
-Click the action menu and select **Publish to Gallery** to share your panel design with the community. See the [Template Gallery](/dashboard/panel-gallery) page for details on the submission process.
+Click the action menu and select **Publish to Gallery** to share your panel design with the community. See the [Template Gallery](/dashboard/panel-gallery) page for details on the submission process. Panels that use Components v2 cannot be submitted to the gallery.
 
 ### Gallery Submissions
 
 If you have published any panels, tags, or forms to the gallery, a **Gallery Submissions** section appears below the panels and multi-panels lists. Each submission shows its name, category, status (Pending, Approved, or Rejected), import count, and actions to edit or withdraw it.
 
 ## Panel Editor
 
-The panel editor is used for both creating and editing panels. It is organised into the following collapsible sections, described in order below.
+The panel editor is used for both creating and editing panels. It starts with the **Panel Name** field, followed by the collapsible sections described in order below.
+
+### Panel Name
+
+An optional name (up to 100 characters) for the panel. It is shown in the dashboard, the `/open` command, the ticket channel topic and the notification posted when a ticket thread is opened. If you leave it blank, the panel title is used instead.
 
 ## Panel Appearance
 
 Controls how the panel embed looks in Discord and which channel it is posted to.
 
 ![Panel appearance](../../img/dashboard/panels/panel-appearance.webp)
 
+### Message Format
+
+Choose **Classic** to use the embed fields below, or **Components v2** to build the panel message from blocks. **Panel Channel** and the button settings apply to both.
+
+[Learn more about Components v2](./settings/components-v2-builder).
+
+:::tip Premium Feature
+This is a premium feature. [Learn more about premium](https://tickets.bot/premium).
+:::
+
 ### Panel Title
 
 The bold text at the top of the embed. Default: "Open a ticket".
@@ -72,14 +86,6 @@ The main body text of the embed. Use this to describe your support process, avai
 You can use [Discord message formatting](https://discord.com/developers/docs/reference#message-formatting) in the panel content, including bold, italic, links, and mentions.
 :::
 
-### Panel Channel
-
-The Discord text channel where the bot sends the panel embed. This should be a channel accessible to all members. In thread mode, new tickets are created as threads under this channel. In channel mode, tickets open in the ticket category, but the panel message still lives in this channel.
-
-:::warning Use a Separate Channel
-Do not use the same channel as your transcript channel.
-:::
-
 ### Thumbnail URL
 
 A URL pointing to an image displayed as a small thumbnail to the right of the embed content.
@@ -92,6 +98,14 @@ A URL pointing to an image displayed full-width below the embed content.
 The URL should point directly to an image file. An easy way to get a suitable URL is to send the image as a message in a Discord channel, then right-click the image and choose **Copy Link**.
 :::
 
+### Panel Channel
+
+The Discord text channel where the bot sends the panel embed. This should be a channel accessible to all members. In thread mode, new tickets are created as threads under this channel. In channel mode, tickets open in the ticket category, but the panel message still lives in this channel.
+
+:::warning Use a Separate Channel
+Do not use the same channel as your transcript channel.
+:::
+
 ### Button Text
 
 The label displayed on the panel button. Default: "Open Ticket".
@@ -150,7 +164,7 @@ Controls what happens to the mention message after it is sent:
 
 ### Form
 
-Attach a form to this panel. When a user clicks the panel button, they are presented with the form to fill in before the ticket is created. Their answers are sent in a separate embed below the welcome message. Select "None" to open tickets without a form.
+Attach a form to this panel. When a user clicks the panel button, they are presented with the form to fill in before the ticket is created. Their answers are sent in a separate embed below the welcome message, or at the end of a [Components v2](./settings/components-v2-builder#welcome-message-details) welcome message. Select "None" to open tickets without a form.
 
 [Learn more about forms](./forms).
 
@@ -166,6 +180,16 @@ The welcome message is the embed sent to the ticket channel as soon as the ticke
 
 Previously, the welcome message was set globally on the Settings page. It is now configured per panel.
 
+### Message Format
+
+Choose **Classic** to use the embed fields below, or **Components v2** to build the welcome message from blocks.
+
+[Learn more about Components v2](./settings/components-v2-builder).
+
+:::tip Premium Feature
+This is a premium feature. [Learn more about premium](https://tickets.bot/premium).
+:::
+
 ### Title
 
 The bold text at the top of the welcome message embed.

docs/src/en/features/introduction.md

@@ -11,6 +11,7 @@ The core capabilities of the ticket system, beyond opening and closing tickets.
 | [Awaiting User Response](/dashboard/settings/awaiting-user-response) | Moving a channel-mode ticket to a separate Discord category while it waits on the user |
 | [Claiming Tickets](/dashboard/settings/claiming-tickets) | Letting one staff member take ownership of a ticket so replies stay focused, in channel mode |
 | [Close Requests](/features/close-requests) | Asking the ticket opener to confirm their issue is resolved, with Accept and Deny buttons |
+| [Components v2 Builder](/dashboard/settings/components-v2-builder) | Building panel, welcome, and multi-panel messages from blocks instead of the classic embed |
 | [Exit Survey](/dashboard/settings/exit-survey) | Presenting a form after closing to collect written feedback alongside the star rating |
 | [Forms](/dashboard/forms) | Collecting information from users with a modal before the ticket channel is created |
 | [API-Based Form Inputs](/features/api-form-inputs) | Populating a String Select form field from your own API so options are per-user or real-time |

docs/src/en/premium/perks.md

@@ -21,6 +21,7 @@ Premium features are configured in different places across the dashboard. Colour
 | Awaiting response category | - | - | <Icon icon="fa-solid fa-check" /> | <Icon icon="fa-solid fa-check" /> |
 | Exit surveys | - | - | <Icon icon="fa-solid fa-check" /> | <Icon icon="fa-solid fa-check" /> |
 | Customise embed colour | - | - | <Icon icon="fa-solid fa-check" /> | <Icon icon="fa-solid fa-check" /> |
+| Components v2 message builder | - | - | <Icon icon="fa-solid fa-check" /> | <Icon icon="fa-solid fa-check" /> |
 | Live message updates on the web dashboard | - | - | <Icon icon="fa-solid fa-check" /> | <Icon icon="fa-solid fa-check" /> |
 | Send messages directly from the web dashboard | - | - | <Icon icon="fa-solid fa-check" /> | <Icon icon="fa-solid fa-check" /> |
 | Custom tag alias | - | - | <Icon icon="fa-solid fa-check" /> | <Icon icon="fa-solid fa-check" /> |