Message shortcuts with multi-bot support and modal validation

apps/showcase-bot/config.yaml

@@ -11,7 +11,11 @@ slack:
     - command: /showcase
       description: Block Kit showcase commands
       usage_hint: '[generate|clear|modal|help]'
-  shortcuts: []
+  shortcuts:
+    - callback_id: showcase_message_context
+      name: Showcase message context
+      description: Show message details in a modal
+      type: message
   actions: {}
   modals:
     showcase_modal: showcase_modal

apps/showcase-bot/src/listeners/index.ts

@@ -1,8 +1,10 @@
 import type { App } from '@slack/bolt'
 import * as commands from './commands/showcase'
 import * as actions from './actions/showcase-actions'
+import * as shortcuts from './shortcuts/showcase-shortcuts'
 
 export function registerListeners(app: App) {
   commands.register(app)
   actions.register(app)
+  shortcuts.register(app)
 }

apps/showcase-bot/src/listeners/shortcuts/showcase-shortcuts.ts

@@ -0,0 +1,89 @@
+import type { App, MessageShortcut } from '@slack/bolt'
+import type { KnownBlock } from '@slack/types'
+import { slackLogger } from '../../utils/logger'
+
+export function register(app: App) {
+  app.shortcut<MessageShortcut>(
+    { callback_id: 'showcase_message_context', type: 'message_action' },
+    async ({ shortcut, ack, client }) => {
+      await ack()
+
+      const { message, channel, user } = shortcut
+
+      // Truncate text to stay within Slack's 3000-char mrkdwn limit
+      const maxTextLen = 3000 - '```\n\n```'.length - '*Text*\n'.length
+      const rawText = message.text || ''
+      const truncatedText =
+        rawText.length > maxTextLen
+          ? rawText.slice(0, maxTextLen - 3) + '...'
+          : rawText
+
+      const fields = [
+        ['Timestamp', message.ts],
+        ['Channel', channel.id],
+        ['User', user.id],
+        ['Text', truncatedText ? `\`\`\`${truncatedText}\`\`\`` : '_empty_'],
+      ]
+
+      const blocks: KnownBlock[] = fields.map(([label, value]) => ({
+        type: 'section' as const,
+        text: {
+          type: 'mrkdwn' as const,
+          text: `*${label}*\n${value}`,
+        },
+      }))
+
+      // Show attached files
+      const files = message.files as
+        | Array<{ url_private?: string; mimetype?: string }>
+        | undefined
+      if (files?.length) {
+        for (const file of files) {
+          if (file.url_private && file.mimetype?.startsWith('image/')) {
+            blocks.push({
+              type: 'image',
+              image_url: file.url_private,
+              alt_text: 'Attached image',
+            })
+          }
+        }
+      }
+
+      // Show images from Block Kit blocks
+      const msgBlocks = message.blocks as
+        | Array<{
+            type: string
+            image_url?: string
+            alt_text?: string
+            title?: { text?: string }
+          }>
+        | undefined
+      if (msgBlocks?.length) {
+        for (const block of msgBlocks) {
+          if (block.type === 'image' && block.image_url) {
+            blocks.push({
+              type: 'image',
+              image_url: block.image_url,
+              alt_text: block.alt_text || block.title?.text || 'Image',
+            })
+          }
+        }
+      }
+
+      try {
+        await client.views.open({
+          trigger_id: shortcut.trigger_id,
+          view: {
+            type: 'modal',
+            title: { type: 'plain_text', text: 'Message Context' },
+            close: { type: 'plain_text', text: 'Close' },
+            blocks,
+          },
+        })
+        slackLogger.info('Opened message context modal')
+      } catch (err) {
+        slackLogger.error({ err }, 'Failed to open message context modal')
+      }
+    }
+  )
+}

apps/showcase-bot/src/messages/blocks/13-template-approval.json

@@ -0,0 +1,109 @@
+{
+  "blocks": [
+    {
+      "type": "section",
+      "text": {
+        "type": "mrkdwn",
+        "text": "You have a new request:\n*<google.com|Fred Enriquez - Time Off request>*"
+      }
+    },
+    {
+      "type": "section",
+      "text": {
+        "type": "mrkdwn",
+        "text": "*Type:*\nPaid time off\n*When:*\nAug 10-Aug 13\n*Hours:* 16.0 (2 days)\n*Remaining balance:* 32.0 hours (4 days)\n*Comments:* \"Family in town, going camping!\""
+      },
+      "accessory": {
+        "type": "image",
+        "image_url": "https://api.slack.com/img/blocks/bkb_template_images/approvalsNewDevice.png",
+        "alt_text": "computer thumbnail"
+      }
+    },
+    {
+      "type": "actions",
+      "elements": [
+        {
+          "type": "button",
+          "text": {
+            "type": "plain_text",
+            "emoji": true,
+            "text": "Approve"
+          },
+          "style": "primary",
+          "action_id": "showcase_approval_approve_pto",
+          "value": "click_me_123"
+        },
+        {
+          "type": "button",
+          "text": {
+            "type": "plain_text",
+            "emoji": true,
+            "text": "Deny"
+          },
+          "style": "danger",
+          "action_id": "showcase_approval_deny_pto",
+          "value": "click_me_123"
+        }
+      ]
+    },
+    {
+      "type": "section",
+      "text": {
+        "type": "mrkdwn",
+        "text": "You have a new request:\n*<fakeLink.toEmployeeProfile.com|Fred Enriquez - New device request>*"
+      }
+    },
+    {
+      "type": "section",
+      "fields": [
+        {
+          "type": "mrkdwn",
+          "text": "*Type:*\nComputer (laptop)"
+        },
+        {
+          "type": "mrkdwn",
+          "text": "*When:*\nSubmitted Aug 10"
+        },
+        {
+          "type": "mrkdwn",
+          "text": "*Last Update:*\nMar 10, 2015 (3 years, 5 months)"
+        },
+        {
+          "type": "mrkdwn",
+          "text": "*Reason:*\nAll vowel keys aren't working."
+        },
+        {
+          "type": "mrkdwn",
+          "text": "*Specs:*\n\"Cheetah Pro 15\" - Fast, really fast"
+        }
+      ]
+    },
+    {
+      "type": "actions",
+      "elements": [
+        {
+          "type": "button",
+          "text": {
+            "type": "plain_text",
+            "emoji": true,
+            "text": "Approve"
+          },
+          "style": "primary",
+          "action_id": "showcase_approval_approve_device",
+          "value": "click_me_123"
+        },
+        {
+          "type": "button",
+          "text": {
+            "type": "plain_text",
+            "emoji": true,
+            "text": "Deny"
+          },
+          "style": "danger",
+          "action_id": "showcase_approval_deny_device",
+          "value": "click_me_123"
+        }
+      ]
+    }
+  ]
+}

apps/showcase-bot/src/messages/blocks/14-template-notification.json

@@ -0,0 +1,109 @@
+{
+  "blocks": [
+    {
+      "type": "section",
+      "text": {
+        "type": "plain_text",
+        "emoji": true,
+        "text": "Looks like you have a scheduling conflict with this event:"
+      }
+    },
+    {
+      "type": "divider"
+    },
+    {
+      "type": "section",
+      "text": {
+        "type": "mrkdwn",
+        "text": "*<fakeLink.toUserProfiles.com|Iris / Zelda 1-1>*\nTuesday, January 21 4:00-4:30pm\nBuilding 2 - Havarti Cheese (3)\n2 guests"
+      },
+      "accessory": {
+        "type": "image",
+        "image_url": "https://api.slack.com/img/blocks/bkb_template_images/notifications.png",
+        "alt_text": "calendar thumbnail"
+      }
+    },
+    {
+      "type": "context",
+      "elements": [
+        {
+          "type": "image",
+          "image_url": "https://api.slack.com/img/blocks/bkb_template_images/notificationsWarningIcon.png",
+          "alt_text": "notifications warning icon"
+        },
+        {
+          "type": "mrkdwn",
+          "text": "*Conflicts with Team Huddle: 4:15-4:30pm*"
+        }
+      ]
+    },
+    {
+      "type": "divider"
+    },
+    {
+      "type": "section",
+      "text": {
+        "type": "mrkdwn",
+        "text": "*Propose a new time:*"
+      }
+    },
+    {
+      "type": "section",
+      "text": {
+        "type": "mrkdwn",
+        "text": "*Today - 4:30-5pm*\nEveryone is available: @iris, @zelda"
+      },
+      "accessory": {
+        "type": "button",
+        "text": {
+          "type": "plain_text",
+          "emoji": true,
+          "text": "Choose"
+        },
+        "action_id": "showcase_notification_choose_today",
+        "value": "click_me_123"
+      }
+    },
+    {
+      "type": "section",
+      "text": {
+        "type": "mrkdwn",
+        "text": "*Tomorrow - 4-4:30pm*\nEveryone is available: @iris, @zelda"
+      },
+      "accessory": {
+        "type": "button",
+        "text": {
+          "type": "plain_text",
+          "emoji": true,
+          "text": "Choose"
+        },
+        "action_id": "showcase_notification_choose_tomorrow_4",
+        "value": "click_me_123"
+      }
+    },
+    {
+      "type": "section",
+      "text": {
+        "type": "mrkdwn",
+        "text": "*Tomorrow - 6-6:30pm*\nSome people aren't available: @iris, ~@zelda~"
+      },
+      "accessory": {
+        "type": "button",
+        "text": {
+          "type": "plain_text",
+          "emoji": true,
+          "text": "Choose"
+        },
+        "action_id": "showcase_notification_choose_tomorrow_6",
+        "value": "click_me_123"
+      }
+    },
+    {
+      "type": "section",
+      "text": {
+        "type": "mrkdwn",
+        "text": "*<fakelink.ToMoreTimes.com|Show more times>*"
+      }
+    }
+  ]
+}