@assistant-ui/react-generative-ui 0.0.21 → 0.0.23

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,11 @@
 import type { Action } from "../ir";
+import { resolveFieldReferences } from "../fieldReferences";
+import {
+  formatTemporalUnixSeconds,
+  mergeTemporalMinutes,
+  splitTemporalMinutes,
+} from "../temporal";
+import type { FieldMapping } from "./types";
 
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === "object" && value !== null && !Array.isArray(value);
@@ -8,12 +15,158 @@ const optionValue = (value: unknown): string | undefined =>
     ? value["value"]
     : undefined;
 
+const selectedValue = (
+  action: Record<string, unknown>,
+  field?: FieldMapping,
+): unknown => {
+  if (action["type"] === "datetimepicker" || "selected_date_time" in action) {
+    const seconds = action["selected_date_time"];
+    return seconds === null
+      ? ""
+      : typeof seconds === "number"
+        ? formatTemporalUnixSeconds(seconds, field?.offset)
+        : undefined;
+  }
+  if (action["type"] === "timepicker" || "selected_time" in action) {
+    const time = action["selected_time"];
+    if (time === null) return "";
+    const parts =
+      typeof time === "string" ? splitTemporalMinutes(time) : undefined;
+    return parts?.date === undefined ? parts?.time : undefined;
+  }
+  if (field?.part === "date" && action["selected_date"] === null) return "";
+  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 FieldMapping[] => {
+  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): FieldMapping[] => {
+      if (
+        !Array.isArray(entry) ||
+        typeof entry[0] !== "string" ||
+        typeof entry[1] !== "string"
+      )
+        return [];
+      return [
+        {
+          actionId: entry[0],
+          name: entry[1],
+          component: typeof entry[2] === "string" ? entry[2] : "",
+          ...(entry[2] === "DatePicker" &&
+          (entry[3] === "time" || entry[3] === "datetime")
+            ? {
+                inputType: entry[3],
+                ...(typeof entry[4] === "string" ? { offset: entry[4] } : {}),
+                ...((entry[5] === "date" || entry[5] === "time") &&
+                Number.isSafeInteger(entry[6]) &&
+                entry[6] >= 0
+                  ? { part: entry[5], pairId: entry[6] }
+                  : {}),
+              }
+            : {}),
+        },
+      ];
+    });
+  } 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, field: FieldMapping): unknown => {
+  if (!isRecord(value)) return undefined;
+  if (field.component === "Checkbox" && value["type"] === "checkboxes") {
+    return checkboxValue(value, field.name);
+  }
+  if (value["type"] === "plain_text_input") {
+    return typeof value["value"] === "string" ? value["value"] : undefined;
+  }
+  return selectedValue(value, field);
+};
+
+const fieldValuesFromState = (
+  stateValues: unknown,
+  action: Record<string, unknown>,
+  actionField: FieldMapping | undefined,
+) => {
+  const fields: Record<string, unknown> = Object.create(null);
+  const pairs = new Map<number, { name: string; date: string; time: string }>();
+  const collect = (raw: unknown, field: FieldMapping) => {
+    const value = stateFieldValue(raw, field);
+    if (field.part !== undefined && field.pairId !== undefined) {
+      const pair = pairs.get(field.pairId) ?? {
+        name: field.name,
+        date: "",
+        time: "",
+      };
+      pair[field.part] = typeof value === "string" ? value : "";
+      pairs.set(field.pairId, pair);
+    } else if (field.name && value !== undefined) {
+      fields[field.name] = value;
+    }
+  };
+  if (isRecord(stateValues)) {
+    for (const [blockId, rawBlockValues] of Object.entries(stateValues)) {
+      if (!isRecord(rawBlockValues)) continue;
+      for (const field of fieldMappingsFromBlockId(blockId)) {
+        if (Object.hasOwn(rawBlockValues, field.actionId))
+          collect(rawBlockValues[field.actionId], field);
+      }
+    }
+  }
+  if (actionField?.inputType !== undefined) collect(action, actionField);
+  for (const pair of pairs.values()) {
+    if (pair.name)
+      fields[pair.name] = mergeTemporalMinutes(pair.date, pair.time);
+  }
+  return { fields, pairs };
+};
+
 /**
  * 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 +178,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 +193,39 @@ export function decodeBlockAction(action: unknown): Action | undefined {
       }
     }
 
-    const selectedOption = optionValue(action["selected_option"]);
-    const selectedDate =
-      typeof action["selected_date"] === "string"
-        ? action["selected_date"]
+    const actionField =
+      typeof action["block_id"] === "string"
+        ? fieldMappingsFromBlockId(action["block_id"]).find(
+            (field) => field.actionId === actionId,
+          )
         : 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 { fields, pairs } = fieldValuesFromState(
+      stateValues,
+      action,
+      actionField,
+    );
+    let input = selectedValue(action, actionField) ?? plainValue;
+    if (actionField?.pairId !== undefined) {
+      const pair = pairs.get(actionField.pairId);
+      input =
+        pair === undefined ? "" : mergeTemporalMinutes(pair.date, pair.time);
+      if (!input) return undefined;
+    }
+    if (
+      (action["type"] === "timepicker" ||
+        action["type"] === "datetimepicker") &&
+      input === undefined
+    )
+      return undefined;
 
-    return {
+    const decoded = {
       ...Object.fromEntries(
         Object.entries(payload).filter(([key]) => key !== "$input"),
       ),
       type: actionId,
       ...(input !== undefined ? { $input: input } : {}),
     };
+    return resolveFieldReferences(decoded, fields) 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", () => {