@data-club/ai-hub 0.0.1

package/src/components/DataClubAIHubAdmin/RotatingMessageEditorModal.tsx

@@ -0,0 +1,408 @@
+/**
+ * `<RotatingMessageEditorModal />` — shared create + edit modal for the
+ * Rotating messages sub-page.
+ *
+ * Fields: display name, prompt (textarea), raw Letta agent id, and a schedule
+ * picker offering the two presets (`every N hours/days`, `daily at HH:MM`) plus
+ * an advanced cron escape hatch. The modal owns local required-field validation
+ * and the schedule-shape assembly; the parent page owns the network call.
+ *
+ * Errors surface inline for field-targeted server codes
+ * (`letta_agent_not_found` → agent field, `invalid_schedule` → schedule) and as
+ * a banner otherwise.
+ *
+ * @see docs/server/rotating-messages.md
+ */
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+import type { AIHubAdminTexts } from "../../auth/texts.js";
+import {
+  AIHubRequestError,
+  type RotatingMessageScheduleKind,
+} from "../../client/AIHubClient.js";
+
+/** Create vs edit. */
+export type RotatingEditorMode = "create" | "edit";
+
+/** Initial values for the edit variant. */
+export interface RotatingEditorInitial {
+  displayName: string;
+  prompt: string;
+  lettaAgentId: string;
+  scheduleKind: RotatingMessageScheduleKind;
+  intervalSeconds: number | null;
+  dailyTime: string | null;
+  cronExpression: string | null;
+}
+
+/** Submit body passed up to the parent page. */
+export interface RotatingEditorSubmitBody {
+  displayName: string;
+  prompt: string;
+  lettaAgentId: string;
+  scheduleKind: RotatingMessageScheduleKind;
+  intervalSeconds: number | null;
+  dailyTime: string | null;
+  cronExpression: string | null;
+}
+
+/** Props for `<RotatingMessageEditorModal />`. */
+export interface RotatingMessageEditorModalProps {
+  mode: RotatingEditorMode;
+  initial?: RotatingEditorInitial;
+  texts: AIHubAdminTexts;
+  onSubmit: (body: RotatingEditorSubmitBody) => Promise<void>;
+  onCancel: () => void;
+}
+
+const HHMM_RE = /^([01]\d|2[0-3]):([0-5]\d)$/;
+
+/** Decomposes an interval in seconds into a {value, unit} pair for the form. */
+function decomposeInterval(seconds: number | null): { value: string; unit: "hours" | "days" } {
+  if (seconds && seconds % 86_400 === 0) {
+    return { value: String(seconds / 86_400), unit: "days" };
+  }
+  if (seconds && seconds % 3_600 === 0) {
+    return { value: String(seconds / 3_600), unit: "hours" };
+  }
+  return { value: "6", unit: "hours" };
+}
+
+/**
+ * Renders the create / edit form.
+ *
+ * @param props - see {@link RotatingMessageEditorModalProps}.
+ * @returns the modal markup.
+ */
+export function RotatingMessageEditorModal(
+  props: RotatingMessageEditorModalProps,
+): ReactNode {
+  const isEdit = props.mode === "edit";
+  const initialInterval = decomposeInterval(props.initial?.intervalSeconds ?? null);
+
+  const [displayName, setDisplayName] = useState(props.initial?.displayName ?? "");
+  const [prompt, setPrompt] = useState(props.initial?.prompt ?? "");
+  const [lettaAgentId, setLettaAgentId] = useState(props.initial?.lettaAgentId ?? "");
+  const [scheduleKind, setScheduleKind] = useState<RotatingMessageScheduleKind>(
+    props.initial?.scheduleKind ?? "every",
+  );
+  const [intervalValue, setIntervalValue] = useState(initialInterval.value);
+  const [intervalUnit, setIntervalUnit] = useState<"hours" | "days">(initialInterval.unit);
+  const [dailyTime, setDailyTime] = useState(props.initial?.dailyTime ?? "06:00");
+  const [cronExpression, setCronExpression] = useState(props.initial?.cronExpression ?? "0 6 * * *");
+
+  const [nameError, setNameError] = useState<string | null>(null);
+  const [promptError, setPromptError] = useState<string | null>(null);
+  const [agentError, setAgentError] = useState<string | null>(null);
+  const [scheduleError, setScheduleError] = useState<string | null>(null);
+  const [banner, setBanner] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const firstFieldRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    firstFieldRef.current?.focus();
+  }, []);
+
+  function assembleSchedule():
+    | { ok: true; body: Pick<RotatingEditorSubmitBody, "scheduleKind" | "intervalSeconds" | "dailyTime" | "cronExpression"> }
+    | { ok: false } {
+    if (scheduleKind === "every") {
+      const n = Number(intervalValue);
+      if (!Number.isFinite(n) || n <= 0) {
+        setScheduleError(props.texts.rotatingScheduleInvalidError);
+        return { ok: false };
+      }
+      const seconds = Math.round(n * (intervalUnit === "days" ? 86_400 : 3_600));
+      return {
+        ok: true,
+        body: { scheduleKind, intervalSeconds: seconds, dailyTime: null, cronExpression: null },
+      };
+    }
+    if (scheduleKind === "daily") {
+      if (!HHMM_RE.test(dailyTime)) {
+        setScheduleError(props.texts.rotatingScheduleInvalidError);
+        return { ok: false };
+      }
+      return {
+        ok: true,
+        body: { scheduleKind, intervalSeconds: null, dailyTime, cronExpression: null },
+      };
+    }
+    const expr = cronExpression.trim();
+    if (expr.length === 0) {
+      setScheduleError(props.texts.rotatingScheduleInvalidError);
+      return { ok: false };
+    }
+    return {
+      ok: true,
+      body: { scheduleKind, intervalSeconds: null, dailyTime: null, cronExpression: expr },
+    };
+  }
+
+  async function handleSubmit(event: React.FormEvent): Promise<void> {
+    event.preventDefault();
+    setBanner(null);
+    setNameError(null);
+    setPromptError(null);
+    setAgentError(null);
+    setScheduleError(null);
+
+    const trimmedName = displayName.trim();
+    const trimmedPrompt = prompt.trim();
+    const trimmedAgent = lettaAgentId.trim();
+    if (trimmedName.length === 0) {
+      setNameError(props.texts.rotatingNameRequiredError);
+      return;
+    }
+    if (trimmedPrompt.length === 0) {
+      setPromptError(props.texts.rotatingPromptRequiredError);
+      return;
+    }
+    if (trimmedAgent.length === 0) {
+      setAgentError(props.texts.rotatingAgentRequiredError);
+      return;
+    }
+    const schedule = assembleSchedule();
+    if (!schedule.ok) return;
+
+    setSubmitting(true);
+    try {
+      await props.onSubmit({
+        displayName: trimmedName,
+        prompt: trimmedPrompt,
+        lettaAgentId: trimmedAgent,
+        ...schedule.body,
+      });
+    } catch (err) {
+      if (err instanceof AIHubRequestError) {
+        switch (err.code) {
+          case "letta_agent_not_found":
+            setAgentError(props.texts.rotatingAgentNotFoundError);
+            break;
+          case "invalid_schedule":
+            setScheduleError(props.texts.rotatingScheduleInvalidError);
+            break;
+          default:
+            setBanner(
+              err.message.length > 0 ? err.message : props.texts.rotatingSubmitGenericError,
+            );
+        }
+      } else {
+        setBanner(
+          err instanceof Error && err.message.length > 0
+            ? err.message
+            : props.texts.rotatingSubmitGenericError,
+        );
+      }
+      setSubmitting(false);
+    }
+  }
+
+  const titleText = isEdit
+    ? props.texts.editRotatingModalTitle.replace("{name}", props.initial?.displayName ?? "")
+    : props.texts.createRotatingModalTitle;
+  const submitText = submitting
+    ? props.texts.rotatingModalSubmittingButton
+    : isEdit
+      ? props.texts.rotatingModalSaveButton
+      : props.texts.rotatingModalCreateButton;
+
+  return (
+    <div
+      className="data-club-ai-hub-admin__modal-backdrop"
+      role="presentation"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) props.onCancel();
+      }}
+    >
+      <div
+        className="data-club-ai-hub-admin__modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="rotating-editor-title"
+        data-testid={`admin-rotating-${props.mode}-modal`}
+      >
+        <h2 id="rotating-editor-title" className="data-club-ai-hub-admin__modal-title">
+          {titleText}
+        </h2>
+        <form onSubmit={(event) => void handleSubmit(event)} noValidate>
+          <label className="data-club-ai-hub-admin__form-field">
+            <span className="data-club-ai-hub-admin__form-label">{props.texts.rotatingNameLabel}</span>
+            <input
+              ref={firstFieldRef}
+              type="text"
+              className="data-club-ai-hub-admin__form-input"
+              data-testid="admin-rotating-name-input"
+              value={displayName}
+              onChange={(event) => setDisplayName(event.target.value)}
+              maxLength={255}
+              disabled={submitting}
+            />
+            <span className="data-club-ai-hub-admin__form-helper">{props.texts.rotatingNameHelper}</span>
+            {nameError !== null ? (
+              <span className="data-club-ai-hub-admin__form-error" role="alert">
+                {nameError}
+              </span>
+            ) : null}
+          </label>
+
+          <label className="data-club-ai-hub-admin__form-field">
+            <span className="data-club-ai-hub-admin__form-label">{props.texts.rotatingPromptLabel}</span>
+            <textarea
+              className="data-club-ai-hub-admin__form-input"
+              data-testid="admin-rotating-prompt-input"
+              value={prompt}
+              onChange={(event) => setPrompt(event.target.value)}
+              maxLength={10_000}
+              rows={3}
+              disabled={submitting}
+            />
+            <span className="data-club-ai-hub-admin__form-helper">{props.texts.rotatingPromptHelper}</span>
+            {promptError !== null ? (
+              <span className="data-club-ai-hub-admin__form-error" role="alert">
+                {promptError}
+              </span>
+            ) : null}
+          </label>
+
+          <label className="data-club-ai-hub-admin__form-field">
+            <span className="data-club-ai-hub-admin__form-label">{props.texts.rotatingAgentLabel}</span>
+            <input
+              type="text"
+              className="data-club-ai-hub-admin__form-input"
+              data-testid="admin-rotating-agent-input"
+              value={lettaAgentId}
+              onChange={(event) => setLettaAgentId(event.target.value)}
+              maxLength={255}
+              disabled={submitting}
+            />
+            <span className="data-club-ai-hub-admin__form-helper">{props.texts.rotatingAgentHelper}</span>
+            {agentError !== null ? (
+              <span className="data-club-ai-hub-admin__form-error" role="alert">
+                {agentError}
+              </span>
+            ) : null}
+          </label>
+
+          <fieldset className="data-club-ai-hub-admin__form-field" data-testid="admin-rotating-schedule">
+            <legend className="data-club-ai-hub-admin__form-label">{props.texts.rotatingScheduleLabel}</legend>
+            <label className="data-club-ai-hub-admin__radio-row">
+              <input
+                type="radio"
+                name="schedule-kind"
+                checked={scheduleKind === "every"}
+                onChange={() => setScheduleKind("every")}
+                disabled={submitting}
+              />
+              <span>{props.texts.rotatingScheduleEveryOption}</span>
+            </label>
+            {scheduleKind === "every" ? (
+              <div className="data-club-ai-hub-admin__inline-row">
+                <span className="data-club-ai-hub-admin__form-label">{props.texts.rotatingIntervalValueLabel}</span>
+                <input
+                  type="number"
+                  min={1}
+                  className="data-club-ai-hub-admin__form-input data-club-ai-hub-admin__form-input--narrow"
+                  data-testid="admin-rotating-interval-value"
+                  value={intervalValue}
+                  onChange={(event) => setIntervalValue(event.target.value)}
+                  disabled={submitting}
+                />
+                <select
+                  className="data-club-ai-hub-admin__form-input data-club-ai-hub-admin__form-input--narrow"
+                  data-testid="admin-rotating-interval-unit"
+                  value={intervalUnit}
+                  onChange={(event) => setIntervalUnit(event.target.value as "hours" | "days")}
+                  disabled={submitting}
+                >
+                  <option value="hours">{props.texts.rotatingIntervalUnitHours}</option>
+                  <option value="days">{props.texts.rotatingIntervalUnitDays}</option>
+                </select>
+              </div>
+            ) : null}
+
+            <label className="data-club-ai-hub-admin__radio-row">
+              <input
+                type="radio"
+                name="schedule-kind"
+                checked={scheduleKind === "daily"}
+                onChange={() => setScheduleKind("daily")}
+                disabled={submitting}
+              />
+              <span>{props.texts.rotatingScheduleDailyOption}</span>
+            </label>
+            {scheduleKind === "daily" ? (
+              <div className="data-club-ai-hub-admin__inline-row">
+                <span className="data-club-ai-hub-admin__form-label">{props.texts.rotatingDailyTimeLabel}</span>
+                <input
+                  type="time"
+                  className="data-club-ai-hub-admin__form-input data-club-ai-hub-admin__form-input--narrow"
+                  data-testid="admin-rotating-daily-time"
+                  value={dailyTime}
+                  onChange={(event) => setDailyTime(event.target.value)}
+                  disabled={submitting}
+                />
+                <span className="data-club-ai-hub-admin__form-helper">{props.texts.rotatingDailyTimeHelper}</span>
+              </div>
+            ) : null}
+
+            <label className="data-club-ai-hub-admin__radio-row">
+              <input
+                type="radio"
+                name="schedule-kind"
+                checked={scheduleKind === "cron"}
+                onChange={() => setScheduleKind("cron")}
+                disabled={submitting}
+              />
+              <span>{props.texts.rotatingScheduleCronOption}</span>
+            </label>
+            {scheduleKind === "cron" ? (
+              <div className="data-club-ai-hub-admin__inline-row">
+                <input
+                  type="text"
+                  className="data-club-ai-hub-admin__form-input"
+                  data-testid="admin-rotating-cron-input"
+                  value={cronExpression}
+                  onChange={(event) => setCronExpression(event.target.value)}
+                  maxLength={255}
+                  disabled={submitting}
+                />
+                <span className="data-club-ai-hub-admin__form-helper">{props.texts.rotatingCronHelper}</span>
+              </div>
+            ) : null}
+            {scheduleError !== null ? (
+              <span className="data-club-ai-hub-admin__form-error" role="alert" data-testid="admin-rotating-schedule-error">
+                {scheduleError}
+              </span>
+            ) : null}
+          </fieldset>
+
+          {banner !== null ? (
+            <div className="data-club-ai-hub-admin__error" role="alert" data-testid="admin-rotating-modal-banner">
+              {banner}
+            </div>
+          ) : null}
+          <div className="data-club-ai-hub-admin__modal-actions">
+            <button
+              type="button"
+              className="data-club-ai-hub-admin__button"
+              data-testid="admin-rotating-modal-cancel"
+              onClick={props.onCancel}
+              disabled={submitting}
+            >
+              {props.texts.rotatingModalCancelButton}
+            </button>
+            <button
+              type="submit"
+              className="data-club-ai-hub-admin__button data-club-ai-hub-admin__button--primary"
+              data-testid="admin-rotating-modal-submit"
+              disabled={submitting}
+            >
+              {submitText}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}