Enhance component message handling and introduce new features

- Added `ComponentMessageBinding` model to manage message components in the database.
- Updated `WelcomeConfig`, `Tag`, and `ScheduledMessage` models to support new component fields.
- Integrated component handling in various modules, including Scheduler and Tags, to improve message customization.
- Enhanced user experience by implementing new commands for creating and managing component messages in the utility module.
- Updated localization files to reflect new component-related features and improve user guidance.

apps/bot/src/modules/utility/commands.ts

@@ -422,7 +422,123 @@ const embedCommand: SlashCommand = {
     if (!(await requirePermission(interaction, PermissionFlagsBits.ManageMessages, locale))) {
       return;
     }
-    await showEmbedBuilderModal(interaction);
+
+    const sub = interaction.options.getSubcommand();
+    if (sub === 'builder') {
+      await showEmbedBuilderModal(interaction);
+      return;
+    }
+
+    if (sub === 'components') {
+      const { ChannelType } = await import('discord.js');
+      const channel = interaction.options.getChannel('channel', true);
+      const text = interaction.options.getString('text', true);
+      const imageUrl = interaction.options.getString('image_url');
+      const buttonLabel = interaction.options.getString('button_label');
+      const buttonUrl = interaction.options.getString('button_url');
+
+      if (!text.trim()) {
+        await interaction.reply({
+          content: t(locale, 'utility.embed.components.missingText'),
+          ephemeral: true
+        });
+        return;
+      }
+
+      if (
+        !channel ||
+        (channel.type !== ChannelType.GuildText &&
+          channel.type !== ChannelType.GuildAnnouncement &&
+          channel.type !== ChannelType.PublicThread &&
+          channel.type !== ChannelType.PrivateThread)
+      ) {
+        await interaction.reply({
+          content: t(locale, 'utility.error.channel_not_found'),
+          ephemeral: true
+        });
+        return;
+      }
+
+      const containerChildren: import('@nexumi/shared').ComponentV2Node[] = [
+        { type: 'text_display', content: text.trim() }
+      ];
+      if (imageUrl?.trim()) {
+        containerChildren.push({
+          type: 'media_gallery',
+          items: [{ url: imageUrl.trim() }]
+        });
+      }
+
+      const components: import('@nexumi/shared').MessageComponentsV2 = {
+        components: [
+          {
+            type: 'container',
+            components: containerChildren
+          }
+        ],
+        actions: {}
+      };
+
+      if (buttonLabel?.trim() && buttonUrl?.trim()) {
+        components.components.push({
+          type: 'action_row',
+          components: [
+            {
+              type: 'button',
+              style: 'Link',
+              label: buttonLabel.trim(),
+              url: buttonUrl.trim()
+            }
+          ]
+        });
+      }
+
+      const binding = await context.prisma.componentMessageBinding.create({
+        data: {
+          guildId: interaction.guildId!,
+          channelId: channel.id,
+          payload: components,
+          createdById: interaction.user.id
+        }
+      });
+
+      const { buildComponentsV2Payload } = await import('../../lib/components-v2-payload.js');
+      const payload = buildComponentsV2Payload(components, {
+        source: 'm',
+        ref: binding.id
+      });
+      if (!payload) {
+        await interaction.reply({ content: t(locale, 'generic.error'), ephemeral: true });
+        return;
+      }
+
+      const textChannel = await context.client.channels.fetch(channel.id);
+      if (!textChannel?.isTextBased() || textChannel.isDMBased()) {
+        await interaction.reply({
+          content: t(locale, 'utility.error.channel_not_found'),
+          ephemeral: true
+        });
+        return;
+      }
+
+      const sent = await textChannel.send(payload);
+      await context.prisma.componentMessageBinding.update({
+        where: { id: binding.id },
+        data: { messageId: sent.id }
+      });
+
+      const webui = (await import('../../env.js')).env.WEBUI_URL;
+      const hint = webui
+        ? tf(locale, 'utility.embed.components.dashboardHint', {
+            url: `${webui}/dashboard/${interaction.guildId}/messages`
+          })
+        : '';
+
+      await interaction.reply({
+        content: [t(locale, 'utility.embed.components.sent'), hint].filter(Boolean).join('\n'),
+        ephemeral: true
+      });
+    }
   }
 };