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

package/src/slack/decodeBlockAction.ts

@@ -1,5 +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);
@@ -9,7 +15,26 @@ const optionValue = (value: unknown): string | undefined =>
     ? value["value"]
     : undefined;
 
-const selectedValue = (action: Record<string, unknown>): unknown => {
+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"
@@ -35,22 +60,40 @@ const selectedValue = (action: Record<string, unknown>): unknown => {
   );
 };
 
-const fieldMappingsFromBlockId = (
-  blockId: string,
-): readonly (readonly [string, string, boolean])[] => {
+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): (readonly [string, string, boolean])[] =>
-      Array.isArray(entry) &&
-      typeof entry[0] === "string" &&
-      typeof entry[1] === "string"
-        ? [[entry[0], entry[1], entry[2] === "Checkbox"]]
-        : [],
-    );
+    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 [];
   }
@@ -64,43 +107,53 @@ const checkboxValue = (
     ? value["selected_options"].some((option) => optionValue(option) === name)
     : undefined;
 
-const stateFieldValue = (
-  value: unknown,
-  name: string,
-  isCheckbox: boolean,
-): unknown => {
+const stateFieldValue = (value: unknown, field: FieldMapping): unknown => {
   if (!isRecord(value)) return undefined;
-  if (isCheckbox && value["type"] === "checkboxes") {
-    return checkboxValue(value, name);
+  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);
+  return selectedValue(value, field);
 };
 
 const fieldValuesFromState = (
   stateValues: unknown,
-): Record<string, unknown> => {
+  action: Record<string, unknown>,
+  actionField: FieldMapping | undefined,
+) => {
   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,
-      });
+  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;
+  return { fields, pairs };
 };
 
 /**
@@ -140,7 +193,30 @@ export function decodeBlockAction(
       }
     }
 
-    const input = selectedValue(action) ?? plainValue;
+    const actionField =
+      typeof action["block_id"] === "string"
+        ? fieldMappingsFromBlockId(action["block_id"]).find(
+            (field) => field.actionId === actionId,
+          )
+        : undefined;
+    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;
 
     const decoded = {
       ...Object.fromEntries(
@@ -149,10 +225,7 @@ export function decodeBlockAction(
       type: actionId,
       ...(input !== undefined ? { $input: input } : {}),
     };
-    return resolveFieldReferences(
-      decoded,
-      fieldValuesFromState(stateValues),
-    ) as Action;
+    return resolveFieldReferences(decoded, fields) as Action;
   } catch {
     return undefined;
   }

package/src/slack/fromSlackBlocks.ts

@@ -1,5 +1,6 @@
 import { copyBounded } from "../convert/copyBounded";
 import type { Action, UIElement } from "../ir";
+import { formatTemporalUnixSeconds } from "../temporal";
 import {
   ACTIONS_ELEMENT_CAP,
   CARD_ACTIONS_CAP,
@@ -331,6 +332,27 @@ const actionElementFrom = (
         return selectFrom(element, warnings);
       case "datepicker":
         return datePickerFrom(element);
+      case "timepicker":
+        return {
+          $type: "DatePicker",
+          inputType: "time",
+          ...(typeof element["initial_time"] === "string"
+            ? { value: element["initial_time"] }
+            : {}),
+          $action: decodeAction(element["action_id"], element["value"]),
+        };
+      case "datetimepicker": {
+        const value =
+          typeof element["initial_date_time"] === "number"
+            ? formatTemporalUnixSeconds(element["initial_date_time"])
+            : undefined;
+        return {
+          $type: "DatePicker",
+          inputType: "datetime",
+          ...(value !== undefined ? { value } : {}),
+          $action: decodeAction(element["action_id"], element["value"]),
+        };
+      }
       case "checkboxes":
         return Array.isArray(element["options"]) &&
           element["options"].length > 1
@@ -372,6 +394,13 @@ const inputFrom = (
   warnings: SlackConversionWarning[],
 ): UIElement[] => {
   const element = block["element"];
+  if (
+    isRecord(element) &&
+    (element["type"] === "timepicker" || element["type"] === "datetimepicker")
+  ) {
+    const picker = actionElementFrom(element, warnings);
+    return picker ? [{ ...picker, label: textOf(block["label"]) }] : [];
+  }
   if (!isRecord(element) || element["type"] !== "plain_text_input") {
     warn(
       warnings,

package/src/slack/toSlackBlocks.ts

@@ -6,6 +6,7 @@ import {
 import { copyBounded } from "../convert/copyBounded";
 import { isElement } from "../convert/isElement";
 import { takeRun } from "../convert/takeRun";
+import { classifyTemporal, splitTemporalMinutes } from "../temporal";
 import {
   normalizeSpec,
   type NormalizedUIElement,
@@ -53,6 +54,7 @@ import {
   buildDataTableBlock,
 } from "./constants";
 import type {
+  FieldMapping,
   SlackActionElement,
   SlackBlock,
   SlackButtonElement,
@@ -73,17 +75,12 @@ type ConversionContext = {
   readonly warnings: SlackConversionWarning[];
   readonly omittedPasswordNames: Set<string>;
   fieldBlockIdSequence: number;
+  dateTimePairSequence: number;
   markdownCharacters: number;
   markdownExhausted: boolean;
   dataTableCharacters: number;
 };
 
-type FieldMapping = {
-  readonly actionId: string;
-  readonly name: string;
-  readonly component: string;
-};
-
 const SLACK_BLOCK_ID_CAP = 255;
 
 const INTERACTIVE_TYPES = new Set([
@@ -170,10 +167,21 @@ const serializeFieldBlockId = (
   fields: readonly FieldMapping[],
 ): string =>
   `aui:${sequence}:${JSON.stringify(
-    fields.map(({ actionId, name, component }) =>
-      component === "Checkbox"
-        ? [actionId, name, "Checkbox"]
-        : [actionId, name],
+    fields.map(
+      ({ actionId, name, component, inputType, offset, part, pairId }) =>
+        inputType !== undefined
+          ? [
+              actionId,
+              name,
+              component,
+              inputType,
+              offset ?? null,
+              part ?? null,
+              pairId ?? null,
+            ]
+          : component === "Checkbox"
+            ? [actionId, name, "Checkbox"]
+            : [actionId, name],
     ),
   )}`;
 
@@ -365,7 +373,7 @@ const warnDroppedOptions = (
 const toActionElement = (
   element: NormalizedUIElement,
   context: ConversionContext,
-): SlackActionElement | undefined => {
+): SlackActionElement | SlackActionElement[] | undefined => {
   const { props, action } = element;
   switch (element.type) {
     case "Button":
@@ -425,6 +433,69 @@ const toActionElement = (
     }
     case "DatePicker": {
       const rawDate = asString(props["value"]);
+      const inputType = props["inputType"];
+      if (inputType === "time" || inputType === "datetime") {
+        const actionId = asActionId(action, "DatePicker", context);
+        const temporal = classifyTemporal(rawDate);
+        const parts = splitTemporalMinutes(rawDate);
+        if (
+          (inputType === "time" && temporal.kind === "time") ||
+          (inputType === "datetime" && temporal.kind === "floating")
+        ) {
+          if (parts?.droppedPrecision) {
+            warn(
+              context,
+              "dropped",
+              "DatePicker",
+              "Seconds were dropped because Slack timepickers only support minute precision.",
+            );
+          }
+          const timePicker: SlackActionElement = {
+            type: "timepicker",
+            action_id: actionId,
+            initial_time: parts!.time,
+          };
+          return inputType === "time"
+            ? timePicker
+            : [
+                {
+                  type: "datepicker",
+                  action_id: actionId,
+                  initial_date: parts!.date!,
+                },
+                timePicker,
+              ];
+        }
+        if (inputType === "datetime" && temporal.kind === "instant") {
+          if (
+            temporal.epochMs % 1000 !== 0 ||
+            /[1-9]/.test(temporal.subMillisecondDigits ?? "")
+          ) {
+            warn(
+              context,
+              "dropped",
+              "DatePicker",
+              "Fractional seconds were dropped because Slack datetimepickers only support second precision.",
+            );
+          }
+          return {
+            type: "datetimepicker",
+            action_id: actionId,
+            initial_date_time: Math.floor(temporal.epochMs / 1000),
+          };
+        }
+        if (rawDate)
+          warn(
+            context,
+            "dropped",
+            "DatePicker",
+            `value did not match the ${inputType} format and was dropped.`,
+          );
+        return {
+          type: inputType === "time" ? "timepicker" : "datetimepicker",
+          action_id: actionId,
+        };
+      }
       const initialDate = DATE_PATTERN.test(rawDate) ? rawDate : undefined;
       if (rawDate && initialDate === undefined) {
         warn(
@@ -593,42 +664,57 @@ const convertActions = (
   elements: readonly NormalizedUIElement[],
   context: ConversionContext,
 ): SlackBlock[] => {
-  const converted = elements
-    .map((source) => ({
-      source,
-      element: toActionElement(source, context),
-    }))
-    .filter(
-      (
-        entry,
-      ): entry is {
-        readonly source: NormalizedUIElement;
-        readonly element: SlackActionElement;
-      } => entry.element !== undefined,
-    );
+  const converted = elements.flatMap((source) => {
+    const result = toActionElement(source, context);
+    if (result === undefined) return [];
+    const controls = Array.isArray(result) ? result : [result];
+    const inputType =
+      source.type === "DatePicker" ? source.props["inputType"] : undefined;
+    const temporal =
+      inputType === "datetime"
+        ? classifyTemporal(asString(source.props["value"]))
+        : undefined;
+    const pairId =
+      controls.length > 1 ? context.dateTimePairSequence++ : undefined;
+    return controls.map((element) => {
+      const name = asString(source.props["name"]);
+      const field: FieldMapping | undefined =
+        inputType === "time" || inputType === "datetime"
+          ? {
+              actionId: element.action_id,
+              name,
+              component: source.type,
+              inputType,
+              ...(temporal?.kind === "instant"
+                ? { offset: temporal.offset }
+                : {}),
+              ...(pairId !== undefined
+                ? ({
+                    part: element.type === "datepicker" ? "date" : "time",
+                    pairId,
+                  } as const)
+                : {}),
+            }
+          : name
+            ? { actionId: element.action_id, name, component: source.type }
+            : undefined;
+      return { element, field };
+    });
+  });
   const blocks: SlackBlock[] = [];
   const groups: (typeof converted)[] = [];
   let group: typeof converted = [];
   let actionIds = new Set<string>();
-  const hasFieldName = (entry: (typeof converted)[number]): boolean => {
-    const name = entry.source.props["name"];
-    return typeof name === "string" && name.length > 0;
-  };
   const fieldsFor = (entries: typeof converted): FieldMapping[] =>
-    entries.flatMap(({ source, element }) => {
-      const name = source.props["name"];
-      return typeof name === "string" && name.length > 0
-        ? [{ actionId: element.action_id, name, component: source.type }]
-        : [];
-    });
+    entries.flatMap(({ field }) => (field === undefined ? [] : [field]));
   for (const entry of converted) {
     const repeatedMappedActionId =
       actionIds.has(entry.element.action_id) &&
-      (hasFieldName(entry) ||
+      (entry.field !== undefined ||
         group.some(
           (candidate) =>
             candidate.element.action_id === entry.element.action_id &&
-            hasFieldName(candidate),
+            candidate.field !== undefined,
         ));
     if (group.length === ACTIONS_ELEMENT_CAP || repeatedMappedActionId) {
       groups.push(group);
@@ -1690,6 +1776,7 @@ export function toSlackBlocks(
     warnings: [],
     omittedPasswordNames: new Set(),
     fieldBlockIdSequence: 0,
+    dateTimePairSequence: 0,
     markdownCharacters: 0,
     markdownExhausted: false,
     dataTableCharacters: 0,

package/src/slack/types.ts

@@ -1,5 +1,15 @@
 import type { UIElement } from "../ir";
 
+export type FieldMapping = {
+  readonly actionId: string;
+  readonly name: string;
+  readonly component: string;
+  readonly inputType?: "time" | "datetime";
+  readonly offset?: string;
+  readonly part?: "date" | "time";
+  readonly pairId?: number;
+};
+
 /** A Slack plain-text composition object. */
 export interface SlackPlainText {
   readonly type: "plain_text";
@@ -46,6 +56,18 @@ export interface SlackDatePickerElement {
   readonly initial_date?: string;
 }
 
+export interface SlackTimePickerElement {
+  readonly type: "timepicker";
+  readonly action_id: string;
+  readonly initial_time?: string;
+}
+
+export interface SlackDateTimePickerElement {
+  readonly type: "datetimepicker";
+  readonly action_id: string;
+  readonly initial_date_time?: number;
+}
+
 /** A Slack checkbox-group element. */
 export interface SlackCheckboxesElement {
   readonly type: "checkboxes";
@@ -76,6 +98,8 @@ export type SlackActionElement =
   | SlackButtonElement
   | SlackStaticSelectElement
   | SlackDatePickerElement
+  | SlackTimePickerElement
+  | SlackDateTimePickerElement
   | SlackCheckboxesElement
   | SlackRadioButtonsElement;
 

package/src/slack.ts

@@ -20,6 +20,7 @@ export type {
   SlackDataTableRawNumberCell,
   SlackDataTableRawTextCell,
   SlackDatePickerElement,
+  SlackDateTimePickerElement,
   SlackDividerBlock,
   SlackHeaderBlock,
   SlackImageBlock,
@@ -33,5 +34,6 @@ export type {
   SlackSectionBlock,
   SlackStaticSelectElement,
   SlackTextObject,
+  SlackTimePickerElement,
   ToSlackBlocksOptions,
 } from "./slack/types";