@assistant-ui/react-generative-ui 0.0.20 → 0.0.22

package/src/slack/decodeBlockAction.test.ts

@@ -2,6 +2,30 @@ import { describe, expect, it } from "vitest";
 import { decodeBlockAction } from "./decodeBlockAction";
 
 describe("decodeBlockAction", () => {
+  it.each([
+    "{}",
+    '{"sku":"typed text","qty":2}',
+    '{"type":"other","$input":"typed text"}',
+  ])("preserves plain-text input containing JSON verbatim: %s", (value) => {
+    expect(
+      decodeBlockAction({
+        type: "plain_text_input",
+        action_id: "leave_note",
+        value,
+      }),
+    ).toEqual({ type: "leave_note", $input: value });
+  });
+
+  it("keeps typed text distinct from a button's serialized payload", () => {
+    const value = '{"sku":"abc123","$input":"ignored"}';
+    expect(
+      decodeBlockAction({ type: "button", action_id: "buy_item", value }),
+    ).toEqual({
+      type: "buy_item",
+      sku: "abc123",
+    });
+  });
+
   it("decodes a button action, spreading its JSON value into the payload", () => {
     const action = {
       action_id: "buy_item",
@@ -14,6 +38,70 @@ describe("decodeBlockAction", () => {
     });
   });
 
+  it("resolves nested field references from named plain-text input state", () => {
+    const blockId = `aui:0:${JSON.stringify([["note", "note"]])}`;
+    expect(
+      decodeBlockAction(
+        {
+          action_id: "save",
+          value: JSON.stringify({ context: { note: { $field: "note" } } }),
+        },
+        {
+          [blockId]: {
+            note: { type: "plain_text_input", value: "edited" },
+          },
+        },
+      ),
+    ).toEqual({ type: "save", context: { note: "edited" } });
+  });
+
+  it("maps each action in a shared block and preserves empty checkbox selections", () => {
+    const blockId = `aui:1:${JSON.stringify([
+      ["choose_plan", "plan"],
+      ["choose_tags", "tags"],
+      ["choose_date", "date"],
+      ["choose_size", "size"],
+    ])}`;
+    expect(
+      decodeBlockAction(
+        {
+          action_id: "submit",
+          value: JSON.stringify({
+            context: {
+              plan: { $field: "plan" },
+              tags: { $field: "tags" },
+              date: { $field: "date" },
+              size: { $field: "size" },
+              missing: { $field: "missing" },
+            },
+          }),
+        },
+        {
+          [blockId]: {
+            choose_plan: {
+              type: "static_select",
+              selected_option: { value: "pro" },
+            },
+            choose_tags: { type: "checkboxes", selected_options: [] },
+            choose_date: { type: "datepicker", selected_date: "2026-09-25" },
+            choose_size: {
+              type: "radio_buttons",
+              selected_option: { value: "small" },
+            },
+          },
+        },
+      ),
+    ).toEqual({
+      type: "submit",
+      context: {
+        plan: "pro",
+        tags: [],
+        date: "2026-09-25",
+        size: "small",
+      },
+    });
+  });
+
   it("decodes a static_select action, reading $input from selected_option.value", () => {
     const action = {
       action_id: "choose_color",
@@ -36,6 +124,16 @@ describe("decodeBlockAction", () => {
     });
   });
 
+  it("decodes a number input action as a number", () => {
+    expect(
+      decodeBlockAction({
+        type: "number_input",
+        action_id: "set_quantity",
+        value: "3.5",
+      }),
+    ).toEqual({ type: "set_quantity", $input: 3.5 });
+  });
+
   it("decodes a checkboxes action, reading $input from selected_options[].value", () => {
     const action = {
       action_id: "toggle_opts",

package/src/slack/decodeBlockAction.ts

@@ -1,4 +1,5 @@
 import type { Action } from "../ir";
+import { resolveFieldReferences } from "../fieldReferences";
 
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === "object" && value !== null && !Array.isArray(value);
@@ -8,12 +9,111 @@ const optionValue = (value: unknown): string | undefined =>
     ? value["value"]
     : undefined;
 
+const selectedValue = (action: Record<string, unknown>): unknown => {
+  const selectedOption = optionValue(action["selected_option"]);
+  const selectedDate =
+    typeof action["selected_date"] === "string"
+      ? action["selected_date"]
+      : undefined;
+  const selectedOptions = Array.isArray(action["selected_options"])
+    ? action["selected_options"]
+        .map(optionValue)
+        .filter((value): value is string => value !== undefined)
+    : undefined;
+  const numberInput =
+    action["type"] === "number_input" && typeof action["value"] === "string"
+      ? Number(action["value"])
+      : undefined;
+  return (
+    selectedOption ??
+    selectedDate ??
+    (selectedOptions !== undefined
+      ? selectedOptions
+      : Number.isFinite(numberInput)
+        ? numberInput
+        : undefined)
+  );
+};
+
+const fieldMappingsFromBlockId = (
+  blockId: string,
+): readonly (readonly [string, string, boolean])[] => {
+  if (!/^aui:\d+:/.test(blockId)) return [];
+  const mappingStart = blockId.indexOf(":", 4);
+  if (mappingStart === -1) return [];
+  try {
+    const parsed: unknown = JSON.parse(blockId.slice(mappingStart + 1));
+    if (!Array.isArray(parsed)) return [];
+    return parsed.flatMap((entry): (readonly [string, string, boolean])[] =>
+      Array.isArray(entry) &&
+      typeof entry[0] === "string" &&
+      typeof entry[1] === "string"
+        ? [[entry[0], entry[1], entry[2] === "Checkbox"]]
+        : [],
+    );
+  } catch {
+    return [];
+  }
+};
+
+const checkboxValue = (
+  value: Record<string, unknown>,
+  name: string,
+): boolean | undefined =>
+  Array.isArray(value["selected_options"])
+    ? value["selected_options"].some((option) => optionValue(option) === name)
+    : undefined;
+
+const stateFieldValue = (
+  value: unknown,
+  name: string,
+  isCheckbox: boolean,
+): unknown => {
+  if (!isRecord(value)) return undefined;
+  if (isCheckbox && value["type"] === "checkboxes") {
+    return checkboxValue(value, name);
+  }
+  if (value["type"] === "plain_text_input") {
+    return typeof value["value"] === "string" ? value["value"] : undefined;
+  }
+  return selectedValue(value);
+};
+
+const fieldValuesFromState = (
+  stateValues: unknown,
+): Record<string, unknown> => {
+  const fields: Record<string, unknown> = Object.create(null);
+  if (!isRecord(stateValues)) return fields;
+  for (const [blockId, rawBlockValues] of Object.entries(stateValues)) {
+    if (!isRecord(rawBlockValues)) continue;
+    for (const [actionId, name, isCheckbox] of fieldMappingsFromBlockId(
+      blockId,
+    )) {
+      if (!Object.hasOwn(rawBlockValues, actionId)) continue;
+      const value = stateFieldValue(rawBlockValues[actionId], name, isCheckbox);
+      if (value === undefined) continue;
+      Object.defineProperty(fields, name, {
+        value,
+        enumerable: true,
+        configurable: true,
+        writable: true,
+      });
+    }
+  }
+  return fields;
+};
+
 /**
  * Decodes one structural entry from a Slack `block_actions` payload.
  * `$input` is reserved for the runtime selection: a `$input` key inside the
  * button's JSON `value` payload is dropped rather than spread into the result.
+ * `stateValues` is the companion `state.values` object used to resolve named
+ * control values referenced by `{ "$field": name }` in the action payload.
  */
-export function decodeBlockAction(action: unknown): Action | undefined {
+export function decodeBlockAction(
+  action: unknown,
+  stateValues?: unknown,
+): Action | undefined {
   try {
     if (!isRecord(action) || typeof action["action_id"] !== "string") {
       return undefined;
@@ -25,7 +125,9 @@ export function decodeBlockAction(action: unknown): Action | undefined {
     const rawValue = action["value"];
     let payload: Record<string, unknown> = {};
     let plainValue: string | undefined;
-    if (typeof rawValue === "string") {
+    if (action["type"] === "plain_text_input" && typeof rawValue === "string") {
+      plainValue = rawValue;
+    } else if (typeof rawValue === "string") {
       try {
         const parsed: unknown = JSON.parse(rawValue);
         if (isRecord(parsed)) {
@@ -38,28 +140,19 @@ export function decodeBlockAction(action: unknown): Action | undefined {
       }
     }
 
-    const selectedOption = optionValue(action["selected_option"]);
-    const selectedDate =
-      typeof action["selected_date"] === "string"
-        ? action["selected_date"]
-        : undefined;
-    const selectedOptions = Array.isArray(action["selected_options"])
-      ? action["selected_options"]
-          .map(optionValue)
-          .filter((value): value is string => value !== undefined)
-      : undefined;
-    const input =
-      selectedOption ??
-      selectedDate ??
-      (selectedOptions !== undefined ? selectedOptions : plainValue);
+    const input = selectedValue(action) ?? plainValue;
 
-    return {
+    const decoded = {
       ...Object.fromEntries(
         Object.entries(payload).filter(([key]) => key !== "$input"),
       ),
       type: actionId,
       ...(input !== undefined ? { $input: input } : {}),
     };
+    return resolveFieldReferences(
+      decoded,
+      fieldValuesFromState(stateValues),
+    ) as Action;
   } catch {
     return undefined;
   }

package/src/slack/fromSlackBlocks.test.ts

@@ -1,6 +1,10 @@
 import { describe, expect, it } from "vitest";
 import type { UIElement } from "../ir";
-import { INBOUND_BLOCK_CAP, SELECT_OPTION_CAP } from "./constants";
+import {
+  CHECKBOX_OPTION_CAP,
+  INBOUND_BLOCK_CAP,
+  SELECT_OPTION_CAP,
+} from "./constants";
 import { fromSlackBlocks } from "./fromSlackBlocks";
 import { toSlackBlocks } from "./toSlackBlocks";
 import type { ToSlackBlocksOptions } from "./types";
@@ -319,6 +323,54 @@ describe("fromSlackBlocks", () => {
       ]);
     });
 
+    it("reads defaultValue from a matching static_select initial_option", () => {
+      const { nodes } = fromSlackBlocks([
+        {
+          type: "actions",
+          elements: [
+            {
+              type: "static_select",
+              action_id: "pick",
+              options: [
+                { text: { type: "plain_text", text: "Alpha" }, value: "a" },
+                { text: { type: "plain_text", text: "Beta" }, value: "b" },
+              ],
+              initial_option: {
+                text: { type: "plain_text", text: "Beta" },
+                value: "b",
+              },
+            },
+          ],
+        },
+      ]);
+      expect(nodes[0]).toMatchObject({
+        $type: "Select",
+        defaultValue: "b",
+      });
+    });
+
+    it("omits defaultValue when static_select initial_option is not an option", () => {
+      const { nodes } = fromSlackBlocks([
+        {
+          type: "actions",
+          elements: [
+            {
+              type: "static_select",
+              action_id: "pick",
+              options: [
+                { text: { type: "plain_text", text: "Alpha" }, value: "a" },
+              ],
+              initial_option: {
+                text: { type: "plain_text", text: "Missing" },
+                value: "missing",
+              },
+            },
+          ],
+        },
+      ]);
+      expect(nodes[0]).not.toHaveProperty("defaultValue");
+    });
+
     it("inverts a datepicker, reading value from initial_date and omitting it when absent", () => {
       const { nodes: withDate } = fromSlackBlocks([
         {
@@ -394,6 +446,68 @@ describe("fromSlackBlocks", () => {
       expect(unchecked[0]).not.toHaveProperty("defaultChecked");
     });
 
+    it("inverts multi-option checkboxes into CheckboxGroup with matching initial options", () => {
+      const { nodes } = fromSlackBlocks([
+        {
+          type: "actions",
+          elements: [
+            {
+              type: "checkboxes",
+              action_id: "sizes",
+              value: '{"source":"picker"}',
+              options: [
+                { text: { type: "plain_text", text: "Small" }, value: "s" },
+                { text: { type: "plain_text", text: "Large" }, value: "l" },
+              ],
+              initial_options: [
+                { text: { type: "plain_text", text: "Large" }, value: "l" },
+                {
+                  text: { type: "plain_text", text: "Missing" },
+                  value: "missing",
+                },
+              ],
+            },
+          ],
+        },
+      ]);
+      expect(nodes).toEqual([
+        {
+          $type: "CheckboxGroup",
+          options: [
+            { label: "Small", value: "s" },
+            { label: "Large", value: "l" },
+          ],
+          defaultValue: ["l"],
+          $action: { type: "sizes", source: "picker" },
+        },
+      ]);
+    });
+
+    it("drops malformed CheckboxGroup options", () => {
+      const { nodes } = fromSlackBlocks([
+        {
+          type: "actions",
+          elements: [
+            {
+              type: "checkboxes",
+              action_id: "sizes",
+              options: [
+                { text: { type: "plain_text", text: "Small" }, value: "s" },
+                { text: { type: "plain_text", text: "Missing value" } },
+              ],
+            },
+          ],
+        },
+      ]);
+      expect(nodes).toEqual([
+        {
+          $type: "CheckboxGroup",
+          options: [{ label: "Small", value: "s" }],
+          $action: { type: "sizes" },
+        },
+      ]);
+    });
+
     it("inverts radio_buttons, reading defaultValue from initial_option and omitting it when absent", () => {
       const { nodes: withValue } = fromSlackBlocks([
         {
@@ -504,6 +618,33 @@ describe("fromSlackBlocks", () => {
       expect(nodes[0]).not.toHaveProperty("multiline");
     });
 
+    it("reads defaultValue from a string initial_value, including empty text", () => {
+      const withText = fromSlackBlocks([
+        {
+          type: "input",
+          label: { type: "plain_text", text: "Notes" },
+          element: {
+            type: "plain_text_input",
+            action_id: "notes",
+            initial_value: "Draft reply",
+          },
+        },
+      ]);
+      const withEmptyText = fromSlackBlocks([
+        {
+          type: "input",
+          label: { type: "plain_text", text: "Notes" },
+          element: {
+            type: "plain_text_input",
+            action_id: "notes",
+            initial_value: "",
+          },
+        },
+      ]);
+      expect(withText.nodes[0]).toMatchObject({ defaultValue: "Draft reply" });
+      expect(withEmptyText.nodes[0]).toMatchObject({ defaultValue: "" });
+    });
+
     it("drops an input block wrapping an unrecognized element", () => {
       const { nodes, warnings } = fromSlackBlocks([
         {
@@ -765,6 +906,27 @@ describe("fromSlackBlocks", () => {
   });
 
   describe("round trip", () => {
+    it("keeps Input and Select defaultValue props", () => {
+      const tree = [
+        {
+          $type: "Input",
+          label: "Notes",
+          defaultValue: "Draft reply",
+          $action: { type: "notes" },
+        },
+        {
+          $type: "Select",
+          options: [
+            { label: "Alpha", value: "a" },
+            { label: "Beta", value: "b" },
+          ],
+          defaultValue: "b",
+          $action: { type: "pick" },
+        },
+      ];
+      expect(fromSlackBlocks(toSlackBlocks(tree).blocks).nodes).toEqual(tree);
+    });
+
     const fixtures: readonly {
       readonly name: string;
       readonly tree: unknown;
@@ -898,6 +1060,29 @@ describe("fromSlackBlocks", () => {
           },
         ],
       },
+      {
+        name: "CheckboxGroup with defaultValue",
+        tree: {
+          $type: "CheckboxGroup",
+          options: [
+            { label: "Small", value: "s" },
+            { label: "Large", value: "l" },
+          ],
+          defaultValue: ["s", "l"],
+          $action: { type: "sizes" },
+        },
+        expected: [
+          {
+            $type: "CheckboxGroup",
+            options: [
+              { label: "Small", value: "s" },
+              { label: "Large", value: "l" },
+            ],
+            defaultValue: ["s", "l"],
+            $action: { type: "sizes" },
+          },
+        ],
+      },
       {
         name: "Input",
         tree: {
@@ -1063,7 +1248,7 @@ describe("fromSlackBlocks", () => {
 });
 
 describe("fromSlackBlocks checkbox and radio caps", () => {
-  it("marks defaultChecked only when the first option is initially selected", () => {
+  it("marks defaultChecked only when its single option is initially selected", () => {
     const base = {
       type: "actions",
       elements: [
@@ -1072,7 +1257,6 @@ describe("fromSlackBlocks checkbox and radio caps", () => {
           action_id: "toggle",
           options: [
             { text: { type: "plain_text", text: "First" }, value: "first" },
-            { text: { type: "plain_text", text: "Second" }, value: "second" },
           ],
           initial_options: [
             { text: { type: "plain_text", text: "Second" }, value: "second" },
@@ -1119,6 +1303,41 @@ describe("fromSlackBlocks checkbox and radio caps", () => {
       ),
     ).toBe(true);
   });
+
+  it("clamps inbound CheckboxGroup options to the checkbox cap", () => {
+    const { nodes, warnings } = fromSlackBlocks([
+      {
+        type: "actions",
+        elements: [
+          {
+            type: "checkboxes",
+            action_id: "sizes",
+            options: Array.from(
+              { length: CHECKBOX_OPTION_CAP + 3 },
+              (_, i) => ({
+                text: { type: "plain_text", text: `O${i}` },
+                value: `v${i}`,
+              }),
+            ),
+          },
+        ],
+      },
+    ]);
+    const checkboxGroup = nodes[0];
+    if (
+      checkboxGroup?.$type !== "CheckboxGroup" ||
+      !Array.isArray(checkboxGroup.options)
+    ) {
+      throw new Error("Expected a CheckboxGroup with options.");
+    }
+    expect(checkboxGroup.options).toHaveLength(CHECKBOX_OPTION_CAP);
+    expect(
+      warnings.some(
+        (warning) =>
+          warning.component === "CheckboxGroup" && warning.code === "clamped",
+      ),
+    ).toBe(true);
+  });
 });
 
 it("bounds static-select options when an array replaces its slice", () => {

package/src/slack/fromSlackBlocks.ts

@@ -4,6 +4,7 @@ import {
   ACTIONS_ELEMENT_CAP,
   CARD_ACTIONS_CAP,
   CAROUSEL_CARD_CAP,
+  CHECKBOX_OPTION_CAP,
   CONTEXT_ELEMENT_CAP,
   DATA_TABLE_COLUMN_CAP,
   DATA_TABLE_ROW_CAP,
@@ -212,10 +213,20 @@ const selectFrom = (
     "Select",
     `options were clamped to ${SELECT_OPTION_CAP} entries.`,
   );
+  const convertedOptions = options.map(optionFrom).filter(isDefined);
+  const initialOption = element["initial_option"];
+  const defaultValue =
+    isRecord(initialOption) && typeof initialOption["value"] === "string"
+      ? initialOption["value"]
+      : undefined;
   const placeholder = element["placeholder"];
   return {
     $type: "Select",
-    options: options.map(optionFrom).filter(isDefined),
+    options: convertedOptions,
+    ...(defaultValue !== undefined &&
+    convertedOptions.some((option) => option.value === defaultValue)
+      ? { defaultValue }
+      : {}),
     ...(isRecord(placeholder) ? { placeholder: textOf(placeholder) } : {}),
     $action: decodeAction(element["action_id"], element["value"]),
   };
@@ -250,6 +261,40 @@ const checkboxFrom = (element: Record<string, unknown>): UIElement => {
   };
 };
 
+const checkboxGroupFrom = (
+  element: Record<string, unknown>,
+  warnings: SlackConversionWarning[],
+): UIElement => {
+  const options = boundedArray(
+    element["options"],
+    CHECKBOX_OPTION_CAP,
+    warnings,
+    "CheckboxGroup",
+    `options were clamped to ${CHECKBOX_OPTION_CAP} entries.`,
+  )
+    .map(optionFrom)
+    .filter(isDefined);
+  const defaultValue = clampArray(
+    element["initial_options"],
+    CHECKBOX_OPTION_CAP,
+  ).items.flatMap((initialOption) => {
+    const value =
+      isRecord(initialOption) && typeof initialOption["value"] === "string"
+        ? initialOption["value"]
+        : undefined;
+    return value !== undefined &&
+      options.some((option) => option.value === value)
+      ? [value]
+      : [];
+  });
+  return {
+    $type: "CheckboxGroup",
+    options,
+    ...(defaultValue.length > 0 ? { defaultValue } : {}),
+    $action: decodeAction(element["action_id"], element["value"]),
+  };
+};
+
 const radioGroupFrom = (
   element: Record<string, unknown>,
   warnings: SlackConversionWarning[],
@@ -287,7 +332,10 @@ const actionElementFrom = (
       case "datepicker":
         return datePickerFrom(element);
       case "checkboxes":
-        return checkboxFrom(element);
+        return Array.isArray(element["options"]) &&
+          element["options"].length > 1
+          ? checkboxGroupFrom(element, warnings)
+          : checkboxFrom(element);
       case "radio_buttons":
         return radioGroupFrom(element, warnings);
     }
@@ -340,6 +388,9 @@ const inputFrom = (
       label: textOf(block["label"]),
       ...(isRecord(placeholder) ? { placeholder: textOf(placeholder) } : {}),
       ...(element["multiline"] === true ? { multiline: true } : {}),
+      ...(typeof element["initial_value"] === "string"
+        ? { defaultValue: element["initial_value"] }
+        : {}),
       $action: decodeAction(element["action_id"], undefined),
     },
   ];