Modals | Chat SDK - 惯性聚合

Modal form components for collecting user input.

Modals display form dialogs that collect structured user input. Currently supported on Slack and Teams.

import { Modal, TextInput, Select, RadioSelect, SelectOption } from "chat";

Top-level container for a form dialog. Open a modal from an onAction or onSlashCommand handler using event.openModal().

bot.onAction("open-form", async (event) => {
  await event.openModal(
    Modal({
      callbackId: "feedback",
      title: "Submit Feedback",
      submitLabel: "Send",
      children: [
        TextInput({ id: "comment", label: "Comment", multiline: true }),
      ],
    })
  );
});

TextInput

A text input field.

TextInput({
  id: "name",
  label: "Your name",
  placeholder: "Enter your name",
})

TextInput({
  id: "description",
  label: "Description",
  multiline: true,
  maxLength: 500,
  optional: true,
})

Dropdown menu.

Select({
  id: "priority",
  label: "Priority",
  placeholder: "Select priority",
  options: [
    SelectOption({ label: "High", value: "high", description: "Urgent tasks" }),
    SelectOption({ label: "Medium", value: "medium" }),
    SelectOption({ label: "Low", value: "low" }),
  ],
})

Dropdown that loads options dynamically from a handler as the user types. Slack-only. Pair with bot.onOptionsLoad to supply options. See Modals → ExternalSelect for a full example, grouped-options support, and Slack setup notes.

ExternalSelect({
  id: "assignee",
  label: "Assignee",
  placeholder: "Search people",
  minQueryLength: 1,
  initialOption: { label: "Alice", value: "U123" },
})

The loader registered via bot.onOptionsLoad("assignee", handler) returns either a flat SelectOptionElement[] or OptionsLoadGroup[] ({ label, options }[]) for grouped options.

Radio button group for mutually exclusive choices.

RadioSelect({
  id: "status",
  label: "Status",
  options: [
    SelectOption({ label: "Open", value: "open" }),
    SelectOption({ label: "Closed", value: "closed" }),
  ],
})

Same props as Select (except placeholder).

An option used inside Select and RadioSelect.

SelectOption({ label: "High", value: "high", description: "Urgent tasks" })

The children array in Modal accepts these element types:

Type	Created by
`TextInputElement`	`TextInput()`
`SelectElement`	`Select()`
`RadioSelectElement`	`RadioSelect()`
`TextElement`	`Text()` — static text content
`FieldsElement`	`Fields()` — key-value display

推荐订阅源

Chat SDK Documentation

TextInput