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

package/src/teams/toAdaptiveCard.test.ts

@@ -202,6 +202,22 @@ describe("toAdaptiveCard", () => {
       expect((card.body[0] as TeamsFactSet).facts).toHaveLength(5);
     });
 
+    it("appends a directional fact delta to the value text", () => {
+      const { card } = toAdaptiveCard({
+        $type: "Fact",
+        label: "Revenue",
+        value: "$12.4k",
+        delta: "8%",
+        trend: "down",
+      });
+      expect(card.body).toEqual([
+        {
+          type: "FactSet",
+          facts: [{ title: "Revenue", value: "$12.4k (↓ 8%)" }],
+        },
+      ]);
+    });
+
     it("breaks Fact merging on a non-Fact sibling", () => {
       const { card } = toAdaptiveCard([
         { $type: "Fact", label: "A", value: "1" },
@@ -481,6 +497,24 @@ describe("toAdaptiveCard", () => {
       expect((card.body[0] as TeamsInputChoiceSet).id).toBe("select");
     });
 
+    it("sets value from a non-empty defaultValue", () => {
+      const { card } = toAdaptiveCard({
+        $type: "Select",
+        defaultValue: "blue",
+        options: [{ label: "Blue", value: "blue" }],
+      });
+      expect((card.body[0] as TeamsInputChoiceSet).value).toBe("blue");
+    });
+
+    it("omits value when defaultValue is empty", () => {
+      const { card } = toAdaptiveCard({
+        $type: "Select",
+        defaultValue: "",
+        options: [{ label: "Blue", value: "blue" }],
+      });
+      expect((card.body[0] as TeamsInputChoiceSet).value).toBeUndefined();
+    });
+
     it("does not dispatch a prop array through Symbol.species", () => {
       let dispatches = 0;
       const injected = Array.from(
@@ -556,6 +590,86 @@ describe("toAdaptiveCard", () => {
         },
       ]);
     });
+
+    it("appends option descriptions to choice titles", () => {
+      const { card } = toAdaptiveCard({
+        $type: "RadioGroup",
+        options: [
+          {
+            label: "Free",
+            description: "For personal projects",
+            value: "free",
+          },
+        ],
+      });
+      expect((card.body[0] as TeamsInputChoiceSet).choices).toEqual([
+        { title: "Free: For personal projects", value: "free" },
+      ]);
+    });
+  });
+
+  describe("CheckboxGroup", () => {
+    it("renders an expanded multi-select Input.ChoiceSet with the default values joined by commas", () => {
+      const { card } = toAdaptiveCard({
+        $type: "CheckboxGroup",
+        name: "toppings",
+        label: "Toppings",
+        defaultValue: ["basil", 7, "onion"],
+        options: [
+          { label: "Basil", value: "basil" },
+          { label: "Olives", value: "olives" },
+          { label: "Onion", value: "onion" },
+        ],
+      });
+      expect(card.body).toEqual([
+        {
+          type: "Input.ChoiceSet",
+          id: "toppings",
+          style: "expanded",
+          isMultiSelect: true,
+          choices: [
+            { title: "Basil", value: "basil" },
+            { title: "Olives", value: "olives" },
+            { title: "Onion", value: "onion" },
+          ],
+          value: "basil,onion",
+          label: "Toppings",
+        },
+      ]);
+    });
+
+    it("falls back to the checkboxgroup id and appends a companion submit for an action", () => {
+      const { card, warnings } = toAdaptiveCard({
+        $type: "CheckboxGroup",
+        options: [{ label: "Basil", value: "basil" }],
+        $action: { type: "pick" },
+      });
+      expect(card.body).toEqual([
+        {
+          type: "Input.ChoiceSet",
+          id: "checkboxgroup",
+          style: "expanded",
+          isMultiSelect: true,
+          choices: [{ title: "Basil", value: "basil" }],
+        },
+        {
+          type: "ActionSet",
+          actions: [
+            {
+              type: "Action.Submit",
+              title: "Submit",
+              data: { aui: { type: "pick" } },
+            },
+          ],
+        },
+      ]);
+      expect(warnings).toContainEqual({
+        code: "fallback",
+        component: "CheckboxGroup",
+        detail:
+          "Teams inputs cannot dispatch on change; a companion submit action was appended.",
+      });
+    });
   });
 
   describe("Checkbox", () => {
@@ -583,9 +697,58 @@ describe("toAdaptiveCard", () => {
       expect((card.body[0] as TeamsInputToggle).id).toBe("Agree");
       expect((card.body[0] as TeamsInputToggle).value).toBe("false");
     });
+
+    it("maps a switch like a checkbox", () => {
+      const { card } = toAdaptiveCard({
+        $type: "Checkbox",
+        label: "Subscribe",
+        variant: "switch",
+      });
+      expect(card.body[0]).toMatchObject({
+        type: "Input.Toggle",
+        title: "Subscribe",
+      });
+    });
+  });
+
+  describe("Slider", () => {
+    it("renders an Input.Number with its bounds, value, and label", () => {
+      const { card } = toAdaptiveCard({
+        $type: "Slider",
+        name: "quantity",
+        label: "Quantity",
+        min: 1,
+        max: 12,
+        defaultValue: 3,
+      });
+      expect(card.body[0]).toEqual({
+        type: "Input.Number",
+        id: "quantity",
+        label: "Quantity",
+        min: 1,
+        max: 12,
+        value: 3,
+      });
+    });
   });
 
   describe("Input", () => {
+    it("maps password and number inputs while preserving string values", () => {
+      const { card } = toAdaptiveCard([
+        {
+          $type: "Input",
+          name: "quantity",
+          inputType: "number",
+          defaultValue: "2.5",
+        },
+        { $type: "Input", name: "password", inputType: "password" },
+      ]);
+      expect(card.body).toEqual([
+        { type: "Input.Text", id: "quantity", value: "2.5" },
+        { type: "Input.Text", id: "password", style: "password" },
+      ]);
+    });
+
     it("renders an Input.Text", () => {
       const { card } = toAdaptiveCard({
         $type: "Input",
@@ -612,6 +775,38 @@ describe("toAdaptiveCard", () => {
       expect((card.body[0] as TeamsInputText).isMultiline).toBe(true);
     });
 
+    it("keeps a multiline password input single-line", () => {
+      const { card } = toAdaptiveCard({
+        $type: "Input",
+        name: "password",
+        inputType: "password",
+        multiline: true,
+      });
+      expect(card.body[0]).toEqual({
+        type: "Input.Text",
+        id: "password",
+        style: "password",
+      });
+    });
+
+    it("sets value from a non-empty defaultValue", () => {
+      const { card } = toAdaptiveCard({
+        $type: "Input",
+        name: "notes",
+        defaultValue: "Draft reply",
+      });
+      expect((card.body[0] as TeamsInputText).value).toBe("Draft reply");
+    });
+
+    it("omits value when defaultValue is empty", () => {
+      const { card } = toAdaptiveCard({
+        $type: "Input",
+        name: "notes",
+        defaultValue: "",
+      });
+      expect((card.body[0] as TeamsInputText).value).toBeUndefined();
+    });
+
     it("emits no ActionSet when $action is absent", () => {
       const { card } = toAdaptiveCard({ $type: "Input", name: "email" });
       expect(card.body).toHaveLength(1);
@@ -663,7 +858,9 @@ describe("toAdaptiveCard", () => {
       ["Input", { $type: "Input", name: "aui" }],
       ["Select", { $type: "Select", name: "aui", options: [] }],
       ["RadioGroup", { $type: "RadioGroup", name: "aui", options: [] }],
+      ["CheckboxGroup", { $type: "CheckboxGroup", name: "aui", options: [] }],
       ["Checkbox", { $type: "Checkbox", name: "aui", label: "Agree" }],
+      ["Slider", { $type: "Slider", name: "aui", min: 0, max: 10 }],
       ["DatePicker", { $type: "DatePicker", name: "aui" }],
     ] as const)(
       "renames a %s named aui to aui_ with a warning",
@@ -1142,6 +1339,28 @@ describe("toAdaptiveCard", () => {
       ]);
     });
 
+    it("formats table cells from their columns", () => {
+      const { card } = toAdaptiveCard({
+        $type: "Table",
+        columns: [
+          { label: "Number", format: { kind: "number", decimals: 1 } },
+          {
+            label: "Revenue",
+            format: { kind: "currency", currency: "USD", decimals: 2 },
+          },
+          { label: "Share", format: { kind: "percent", decimals: 0 } },
+          { label: "Date", format: { kind: "date" } },
+        ],
+        rows: [[1234.5, 12.4, 0.08, "2024-01-02"]],
+      });
+      const table = card.body[0] as TeamsTable;
+      expect(
+        table.rows[1]?.cells.map(
+          (cell) => (cell.items[0] as TeamsTextBlock).text,
+        ),
+      ).toEqual(["1,234.5", "$12.40", "8%", "Jan 2, 2024"]);
+    });
+
     it("sets firstRowAsHeaders false and emits no header row when there are no columns", () => {
       const { card } = toAdaptiveCard({
         $type: "Table",

package/src/teams/toAdaptiveCard.ts

@@ -11,6 +11,11 @@ import {
   type NormalizedUIElement,
   type NormalizedUINode,
 } from "../ir";
+import {
+  factTrend,
+  formatFactDelta,
+  formatValue,
+} from "../vocabulary/formatValue";
 import {
   CHOICE_OPTION_CAP,
   PAYLOAD_SOFT_CAP,
@@ -52,6 +57,9 @@ const isRecord = (value: unknown): value is Record<string, unknown> =>
 const asString = (value: unknown): string =>
   typeof value === "string" ? value : "";
 
+const asFiniteNumber = (value: unknown): number | undefined =>
+  typeof value === "number" && Number.isFinite(value) ? value : undefined;
+
 const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
 
 const SUBTLE_COLORS = new Set([
@@ -171,7 +179,14 @@ const toChoice = (option: unknown): TeamsInputChoice | undefined => {
   if (!isRecord(option) || typeof option["value"] !== "string") {
     return undefined;
   }
-  return { title: asString(option["label"]), value: option["value"] };
+  const label = asString(option["label"]);
+  const description = asString(option["description"]);
+  return {
+    title: description
+      ? [label, description].filter(Boolean).join(": ")
+      : label,
+    value: option["value"],
+  };
 };
 
 const choicesFrom = (
@@ -206,10 +221,18 @@ const choicesFrom = (
 };
 
 function convertFacts(facts: readonly NormalizedUIElement[]): TeamsCardElement {
-  const set: TeamsFact[] = facts.map((fact) => ({
-    title: asString(fact.props["label"]),
-    value: asString(fact.props["value"]),
-  }));
+  const set: TeamsFact[] = facts.map((fact) => {
+    const value = asString(fact.props["value"]);
+    const delta = fact.props["delta"];
+    const deltaText =
+      typeof delta === "string"
+        ? formatFactDelta(delta, factTrend(delta, fact.props["trend"]))
+        : undefined;
+    return {
+      title: asString(fact.props["label"]),
+      value: deltaText === undefined ? value : `${value} (${deltaText})`,
+    };
+  });
   return { type: "FactSet", facts: set };
 }
 
@@ -277,13 +300,6 @@ const ALERT_STYLE_MAP: Record<string, TeamsContainerStyle> = {
   danger: "attention",
 };
 
-const stringifyCell = (value: unknown): string => {
-  if (typeof value === "string") return value;
-  if (typeof value === "number" || typeof value === "boolean")
-    return String(value);
-  return "";
-};
-
 function convertTable(
   props: Readonly<Record<string, unknown>>,
   context: ConversionContext,
@@ -342,9 +358,18 @@ function convertTable(
     cells: (Array.isArray(row)
       ? copyBounded(row, TABLE_COLUMN_CAP).items
       : []
-    ).map((cell) => ({
+    ).map((cell, index) => ({
       type: "TableCell" as const,
-      items: [textBlock(stringifyCell(cell))],
+      items: [
+        textBlock(
+          formatValue(
+            cell,
+            isRecord(rawColumns[index])
+              ? rawColumns[index]["format"]
+              : undefined,
+          ),
+        ),
+      ],
     })),
   }));
 
@@ -465,11 +490,15 @@ export function convertElement(
       const name = asString(props["name"]);
       const placeholder = asString(props["placeholder"]);
       const label = asString(props["label"]);
+      const defaultValue = props["defaultValue"];
       const input: TeamsCardElement = {
         type: "Input.ChoiceSet",
         id: reservedSafeId(name || "select", "Select", context),
         style: "compact",
         choices: choicesFrom(props["options"], "Select", context),
+        ...(typeof defaultValue === "string" && defaultValue
+          ? { value: defaultValue }
+          : {}),
         ...(placeholder ? { placeholder } : {}),
         ...(label ? { label } : {}),
       };
@@ -491,6 +520,26 @@ export function convertElement(
       };
       return withCompanionSubmit(element, input, context);
     }
+    case "CheckboxGroup": {
+      const name = asString(props["name"]);
+      const label = asString(props["label"]);
+      const checked = Array.isArray(props["defaultValue"])
+        ? props["defaultValue"].filter(
+            (value): value is string =>
+              typeof value === "string" && value !== "",
+          )
+        : [];
+      const input: TeamsCardElement = {
+        type: "Input.ChoiceSet",
+        id: reservedSafeId(name || "checkboxgroup", "CheckboxGroup", context),
+        style: "expanded",
+        isMultiSelect: true,
+        choices: choicesFrom(props["options"], "CheckboxGroup", context),
+        ...(checked.length > 0 ? { value: checked.join(",") } : {}),
+        ...(label ? { label } : {}),
+      };
+      return withCompanionSubmit(element, input, context);
+    }
     case "Checkbox": {
       const name = asString(props["name"]);
       const label = asString(props["label"]);
@@ -504,16 +553,40 @@ export function convertElement(
       };
       return withCompanionSubmit(element, input, context);
     }
+    case "Slider": {
+      const name = asString(props["name"]);
+      const label = asString(props["label"]);
+      const min = asFiniteNumber(props["min"]);
+      const max = asFiniteNumber(props["max"]);
+      const defaultValue = asFiniteNumber(props["defaultValue"]);
+      const input = {
+        type: "Input.Number",
+        id: reservedSafeId(name || "slider", "Slider", context),
+        ...(label ? { label } : {}),
+        ...(min !== undefined ? { min } : {}),
+        ...(max !== undefined ? { max } : {}),
+        ...(defaultValue !== undefined ? { value: defaultValue } : {}),
+      } as unknown as TeamsCardElement;
+      return withCompanionSubmit(element, input, context);
+    }
     case "Input": {
       const name = asString(props["name"]);
       const label = asString(props["label"]);
       const placeholder = asString(props["placeholder"]);
+      const defaultValue = props["defaultValue"];
       const input: TeamsCardElement = {
         type: "Input.Text",
         id: reservedSafeId(name || "input", "Input", context),
+        ...(props["inputType"] === "password" ? { style: "password" } : {}),
         ...(label ? { label } : {}),
         ...(placeholder ? { placeholder } : {}),
-        ...(props["multiline"] === true ? { isMultiline: true } : {}),
+        ...(typeof defaultValue === "string" && defaultValue
+          ? { value: defaultValue }
+          : {}),
+        ...(props["multiline"] === true &&
+        (props["inputType"] === undefined || props["inputType"] === "text")
+          ? { isMultiline: true }
+          : {}),
       };
       return withCompanionSubmit(element, input, context);
     }
@@ -785,10 +858,11 @@ export function convertRootToCard(
  * Converts a generative-ui tree into a Microsoft Teams Adaptive Card and
  * non-fatal conversion warnings. Sizes, weights, and colors map to Adaptive
  * Card's semantic enums rather than raw values. An Input/Select/RadioGroup/
- * Checkbox/DatePicker whose id would be the reserved {@link RESERVED_INPUT_ID}
- * is renamed with a warning (see `decodeSubmitData`). Never throws: an
- * unknown `$type` is skipped with a "dropped" warning, and a malformed input
- * resolves to an empty card plus a "dropped" warning instead of throwing.
+ * CheckboxGroup/Checkbox/Slider/DatePicker whose id would be the reserved
+ * {@link RESERVED_INPUT_ID} is renamed with a warning (see `decodeSubmitData`).
+ * Never throws: an unknown `$type` is skipped with a "dropped" warning, and a
+ * malformed input resolves to an empty card plus a "dropped" warning instead
+ * of throwing.
  */
 export function toAdaptiveCard(
   node: unknown,

package/src/teams/types.ts

@@ -109,11 +109,12 @@ export interface TeamsInputChoice {
   readonly value: string;
 }
 
-/** A dropdown (`compact`) or radio group (`expanded`) input. */
+/** A dropdown (`compact`), radio group (`expanded`), or checkbox group (`expanded` with `isMultiSelect`) input. */
 export interface TeamsInputChoiceSet {
   readonly type: "Input.ChoiceSet";
   readonly id: string;
   readonly style: "compact" | "expanded";
+  readonly isMultiSelect?: true;
   readonly choices: readonly TeamsInputChoice[];
   readonly placeholder?: string;
   readonly label?: string;
@@ -138,8 +139,10 @@ export interface TeamsInputToggle {
 export interface TeamsInputText {
   readonly type: "Input.Text";
   readonly id: string;
+  readonly style?: "password";
   readonly label?: string;
   readonly placeholder?: string;
+  readonly value?: string;
   readonly isMultiline?: true;
   readonly separator?: true;
   readonly spacing?: "large";