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

package/src/teams/temporalId.ts

@@ -0,0 +1,56 @@
+import { classifyTemporal } from "../temporal";
+import type { TeamsTemporalField } from "./types";
+
+export const TEMPORAL_INPUT_PREFIX = "aui:datetime:";
+const encodeFieldId = (value: string): string =>
+  Array.from(value, (char) =>
+    /^[\uD800-\uDFFF]$/.test(char)
+      ? `%u${char.charCodeAt(0).toString(16).toUpperCase()}`
+      : encodeURIComponent(char),
+  ).join("");
+
+const decodeFieldId = (value: string): string =>
+  value
+    .split(/(%uD[89A-F][0-9A-F]{2})/)
+    .map((part, index) =>
+      index % 2 === 0
+        ? decodeURIComponent(part)
+        : String.fromCharCode(Number.parseInt(part.slice(2), 16)),
+    )
+    .join("");
+
+export const encodeTemporalInputId = (field: TeamsTemporalField): string =>
+  `${TEMPORAL_INPUT_PREFIX}${field.role}:${encodeFieldId(field.fieldId)}${field.role === "time" ? `:${encodeURIComponent(field.previousValue ?? "")}` : ""}`;
+
+export const decodeTemporalInputId = (
+  id: string,
+): TeamsTemporalField | undefined => {
+  try {
+    const parts = id.slice(TEMPORAL_INPUT_PREFIX.length).split(":");
+    const role = parts[0];
+    if (
+      !id.startsWith(TEMPORAL_INPUT_PREFIX) ||
+      (role !== "date" && role !== "time") ||
+      parts.length !== (role === "date" ? 2 : 3)
+    )
+      return undefined;
+    const fieldId = decodeFieldId(parts[1]!);
+    const previousValue = role === "time" ? decodeURIComponent(parts[2]!) : "";
+    if (
+      !fieldId ||
+      fieldId === "aui" ||
+      fieldId.startsWith(TEMPORAL_INPUT_PREFIX) ||
+      (previousValue !== "" &&
+        classifyTemporal(previousValue).kind !== "instant")
+    )
+      return undefined;
+    const metadata: TeamsTemporalField = {
+      fieldId,
+      role,
+      ...(previousValue ? { previousValue } : {}),
+    };
+    return encodeTemporalInputId(metadata) === id ? metadata : undefined;
+  } catch {
+    return undefined;
+  }
+};

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",