Build shortcuts that open modals from anywhere in Slack

import type { AllMiddlewareArgs, SlackShortcutMiddlewareArgs } from "@slack/bolt";
 
const bugReportShortcut = async ({
  ack,
  client,
  body,
  logger,
  context,
}: AllMiddlewareArgs & SlackShortcutMiddlewareArgs) => {
  try {
    logger.info({
      ...context.correlation,
      user: body.user.id,
    }, "Processing bug report shortcut");
    
    await ack();
 
  const modal = {
    type: "modal",
    callback_id: "bug_report_modal",
    title: {
      type: "plain_text",
      text: "Report a Bug"
    },
    submit: {
      type: "plain_text",
      text: "Submit Report"
    },
    blocks: [
      {
        type: "section",
        text: {
          type: "mrkdwn",
          text: "Help us track and fix bugs faster with detailed reports."
        }
      },
      {
        type: "input",
        block_id: "bug_title",
        label: {
          type: "plain_text",
          text: "Bug Title"
        },
        element: {
          type: "plain_text_input",
          action_id: "title_input",
          placeholder: {
            type: "plain_text",
            text: "Brief description of the issue"
          }
        }
      },
      {
        type: "input",
        block_id: "bug_description",
        label: {
          type: "plain_text",
          text: "Description"
        },
        element: {
          type: "plain_text_input",
          action_id: "description_input",
          multiline: true,
          placeholder: {
            type: "plain_text",
            text: "Steps to reproduce, expected vs actual behavior"
          }
        }
      },
      {
        type: "input",
        block_id: "channel_select",
        label: {
          type: "plain_text",
          text: "Report to Channel"
        },
        element: {
          type: "channels_select",
          action_id: "channel_input",
          placeholder: {
            type: "plain_text",
            text: "Select channel"
          }
        }
      }
    ]
  };
 
    await client.views.open({
      trigger_id: body.trigger_id,
      view: modal,
    });
  } catch (error) {
    logger.error({
      ...context.correlation,
      error: error instanceof Error ? error.message : String(error),
    }, "Failed to open bug report modal");
  }
};
 
export default bugReportShortcut;

import type { App } from "@slack/bolt";
import sampleShortcutCallback from "./sample-shortcut"; // default import
import bugReportShortcut from "./bug-report"; // Add import
 
const register = (app: App) => {
  app.shortcut("sample_shortcut_id", sampleShortcutCallback);
  app.shortcut("bug_report_shortcut", bugReportShortcut); // Add registration
};
 
export default { register };

import type { AllMiddlewareArgs, SlackViewMiddlewareArgs } from "@slack/bolt";
import { z } from "zod";
 
// Validate form data (same Zod pattern as lesson 1.3 and 3.1)
const BugReportSchema = z.object({
  title: z.string().min(5, "Title must be at least 5 characters"),
  description: z.string().min(20, "Description must be at least 20 characters"),
  channel: z.string().regex(/^C[A-Z0-9]+$/, "Invalid channel ID"),
});
 
const bugReportSubmit = async ({
  ack,
  body,
  view,
  client,
  logger,
  context,
}: AllMiddlewareArgs & SlackViewMiddlewareArgs) => {
  logger.info({
    ...context.correlation,
    user: body.user.id,
  }, "Processing bug report submission");
  
 
  // Extract form data from modal state
  // Access pattern: view.state.values[block_id][action_id][value_or_selected_*]
  const values = view.state.values;
  const rawData = {
    title: values.bug_title.title_input.value,
    description: values.bug_description.description_input.value,
    channel: values.channel_select.channel_input.selected_channel,
  };
 
  // Validate with Zod
  const validated = BugReportSchema.safeParse(rawData);
  if (!validated.success) {
    // For modals, you validate BEFORE ack() (opposite of commands/shortcuts)
    // Return errors to show them inline in the modal
    return await ack({
      response_action: "errors",
      errors: {
        // Map Zod field names to block_ids manually
        bug_title: validated.error.issues.find((i) => i.path[0] === "title")?.message,
        bug_description: validated.error.issues.find((i) => i.path[0] === "description")?.message,
        channel_select: validated.error.issues.find((i) => i.path[0] === "channel")?.message,
      },
    });
  }
 
  // Validation passed - acknowledge and close modal
  await ack();
 
  // Use validated.data (type-safe, no casting needed)
  const { title, description, channel } = validated.data;
  
  // Use AI to suggest severity and category (automated triage)
  let aiSuggestion = "";
  try {
    const analysis = await generateObject({
      model: "openai/gpt-4o-mini",
      schema: z.object({
        severity: z.enum(["P0", "P1", "P2", "P3"]),
        category: z.enum(["auth", "ui", "performance", "data", "other"]),
      }),
      prompt: `Analyze this bug and suggest severity (P0=critical, P3=minor) and category:\nTitle: ${title}\nDescription: ${description}`,
    });
    aiSuggestion = `\n*AI Suggests:* ${analysis.object.severity} | ${analysis.object.category}`;
    
    logger.info({
      ...context.correlation,
      severity: analysis.object.severity,
      category: analysis.object.category,
    }, "AI triage suggestion generated");
  } catch (error) {
    logger.error({
      ...context.correlation,
      error: error instanceof Error ? error.message : String(error),
    }, "AI analysis failed, posting without suggestion");
  }
 
  const bugReport = {
    channel,
    blocks: [
      {
        type: "section",
        text: {
          type: "mrkdwn",
          text: `🐛 *Bug Report*\n*Title:* ${title}\n*Reported by:* <@${body.user.id}>${aiSuggestion}`,
        }
      },
      {
        type: "section",
        text: {
          type: "mrkdwn",
          text: `*Description:*\n${description}`
        }
      },
      {
        type: "context",
        elements: [
          {
            type: "mrkdwn",
            // Slack date formatting: <!date^unix_timestamp^format|fallback_text>
            text: `Reported on <!date^${Math.floor(Date.now() / 1000)}^{date_short} at {time}|just now>`,
          }
        ]
      }
    ]
  };
 
  // Post formatted bug report
  try {
    await client.chat.postMessage(bugReport);
    logger.info({
      ...context.correlation,
      channel,
      title,
    }, "Bug report posted successfully");
  } catch (error) {
    logger.error({
      ...context.correlation,
      error: error instanceof Error ? error.message : String(error),
      channel,
    }, "Failed to post bug report");
 
    // If bot not in channel, DM the user with instructions
    // Type cast needed because Bolt doesn't expose Slack API error structure
    if ((error as any).data?.error === "not_in_channel") {
      await client.chat.postMessage({
        channel: body.user.id,
        text: `⚠️ I couldn't post to <#${channel}>. Please invite me with \`/invite @botname\` or select a different channel.`,
      });
    }
  }
};
 
export default bugReportSubmit;

import type { App } from "@slack/bolt";
import { sampleViewCallback } from "./sample-view";
import bugReportSubmit from "./bug-report-view"; // Add import
 
const register = (app: App) => {
  app.view("sample_view_id", sampleViewCallback);
  app.view("bug_report_modal", bugReportSubmit); // Add registration
};
 
export default { register };